Talking about react implement input box

Features to be implemented by the component:

1, custom Label and input box of the placeholder content;

2, the input content does not conform to the regular expression request, the input box is marked red, conforms to the time standard green;

3, click the Clear button, the button disappears and clears the contents of the input box;

4, open to the outside 3 methods: Gets, sets, deletes the contents of the input box (trim).

Inputbox.html:

<! DOCTYPE html>
 


INPUTBOX.JSX:


var grades = [{team: "Team1", Name: "Alice", grade:80}, {team: "Team1", Name: "Bruce", grade:90}, {team: "Team1", NA Me: "Cindy", grade:50}, {team: "Team2", Name: "David", grade:40}, {team: "Team2", Name: "Emy", grade:60}, {team: "Te
AM2 ", Name:" Fruid ", grade:70}];
		var Filterbox = React.createclass ({getinitialstate:function () {return {inputtext: "", Showpassingonly:false
	}; }, Filter:function (Inputtext, showpassingonly) {this.setstate ({inputtext:inputtext, Showpassingonly:showpass
	Ingonly}); }, Render:function () {return (<div> <searchbox Oninput={this.filter} inputtext={this.state.inputtext } showpassingonly={this.state.showpassingonly}/> <gradelist Grades={this.props.grades} inputText={
	This.state.inputText} showpassingonly={this.state.showpassingonly}/> </div>);
}
}); var searchbox = React.createclass ({filter:function () {this.props.onInput (This.refs.input.value, This.refs.che Ckbox.checked); }, Render:function () {return (<form> <input id= "text" type= "text" ref= "input" placeholder= "sreaching ... "Onchange={this.filter} value={this.props.inputtext}/><br/> <input type=" checkbox "ref=" checkbox "
	Checked={this.props.showpassingonly} onchange={this.filter}/>only Show passing grades </form>);
}
});
		var gradelist = React.createclass ({render:function () {var rows = [];
		var teams = [];  This.props.grades.forEach (function (grade, index) {if (Grade.name.toLowerCase (). IndexOf (This.props.inputText) = =-1 | |
			This.props.showPassingOnly && Grade.grade <) return;
				if (Teams.indexof (grade.team) = =-1) {Rows.push (<team Team={grade.team} key={"team" + index}></team>);
			Teams.push (Grade.team);
		} rows.push (<grade name={grade.name} grade={grade.grade} key={"Grade" + index}></grade>);
		}.bind (this)); if (Rows.length = = 0) rows.push (<tr key={"NomatcheS "}><td colspan=" 2 ">no matches!</td></tr>); Return (<table> <thead> <tr> <th>Name</th> &LT;TH&GT;GRADE&LT;/TH&G
					T
	</tr> </thead> <tbody> {rows} </tbody> </table>);
}
}); var Team = React.createclass ({render:function () {return (<tr> <td colspan= "2" >{this.props.team}&
	Lt;/td> </tr>);
}
});
				var Grade = React.createclass ({render:function ()} {return (<tr> <td>{this.props.name}</td>
	<td>{this.props.grade}</td> </tr>);
}
}); Reactdom.render (<filterbox grades={grades}/>, document.getElementById (' Filterbox '));