React数据双向绑定

App.js

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
      super(props);
      this.stateTimeDate = {timeDate: new Date()};
  //<p>要显示的内容
      this.state = {
          value: ""
      };
  };
  inputChange(e){
//当输入框的值变化的时候，修改state对象中的value值；
      this.setState({
          value : e.target.value
      })
  };
render() {
  return (
      <div>
      <div>
          <h2>It is {this.stateTimeDate.timeDate.toLocaleTimeString()}.</h2>
        </div>
        <div>
              <input  placeholder="请输入文本"  value={this.state.value} onChange={this.inputChange.bind(this)}></input>
              <p>{this.state.value}</p>
          </div>
      </div>
  );
}
}
export default App;

效果图

1.png