使用react创建应用

这是一个简单的记事本应用

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }//在构造函数中创建状态对象，包含一个input属性和一个messages属性
    this.handleChange = this.handleChange.bind(this);//将输入变化事件绑定到this
    this.submitMessage = this.submitMessage.bind(this);//将提交事件绑定到this
  }
  handleChange(e) {
    this.setState({
        input: e.target.value
      });
  }//输入变化事件
  submitMessage() {
     this.setState(prevState => ({
      input: "",
      messages: [...prevState.messages, prevState.input]
    }))
  }//提交事件，传入一个函数作为参数，返回一个包含更新的messages信息的对象，（更新的一条input添加到messages数组中）
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input value={this.state.input} onChange={this.handleChange}/><br/>
        <button onClick={this.submitMessage}>提交</button>
        <ul>
        {this.state.messages.map(msg => (<li>{msg}</li>))}//使用map函数遍历每一个messages数组的元素，并将其转化为JSX元素显示到视图中
         </ul>
      </div>
    );
  }
};