<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React App</title> <script src="https://cdn.staticfile.org/react/16.13.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.13.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script></head><body> <div id="root"></div> <script type="text/babel"> class MyForm extends React.Component { constructor(props) { super(props); this.state = { username: '', age: null, errormessage: '' }; } myChangeHandler = (event) => { let nam = event.target.name; let val = event.target.value; let err = ''; if (nam === "age") { if (val !="" && !Number(val)) { err = <strong>您的年龄必须是数字</strong>; } } this.setState({errormessage: err}); this.setState({[nam]: val}); } render() { return ( <form> <h1>Hello {this.state.username} {this.state.age}</h1> <p>请输入您的姓名：</p> <input type='text' name='username' onChange={this.myChangeHandler} /> <p>请输入您的年龄：</p> <input type='text' name='age' onChange={this.myChangeHandler} /> {this.state.errormessage} </form> ); } } ReactDOM.render(<MyForm />, document.getElementById('root')); </script></body></html>