<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: '' }; } myChangeHandler = (event) => { this.setState({username: event.target.value}); } render() { let header = ''; if (this.state.username) { header = <h1>Hello {this.state.username}</h1>; } else { header = ''; } return ( <form> <h1>Hello {this.state.username}</h1> <p>请输入你的名字：</p> <input type='text' onChange={this.myChangeHandler} /> </form> ); } } ReactDOM.render(<MyForm />, document.getElementById('root')); </script></body></html>