在下面的例子中，input的value值由state来决定，用户输入触发onChange事件，然后更新state，达到修改value的目的。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
 
    this.handleChange = this.handleChange.bind(this);
  }
 
  handleChange(event) {
    this.setState({value: event.target.value});
  }
 
  render() {
    return (
          <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

或许你没看出来和正宗input元素的区别，看一个真实DOM元素的例子,value由inupt自身维护，我们没有给value绑定值。

<input type="text">

textarea和input是一样的用法。

select有些许不同，将value绑定到select上，而不是option。

<select value={this.state.value} onChange={this.handleChange}>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

还有一种是多个输入框的情况，比如登录，有账号、密码等，这时候操作这些不同的input可以通过ref或者name，class，id等方法去setState，看
官方demo。

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,numberOfGuests: 2
    };
 
    this.handleInputChange = this.handleInputChange.bind(this);
  }
 
  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkBox' ? target.checked : target.value;
    const name = target.name;
 
    this.setState({
      [name]: value
    });
  }
 
  render() {
    return (
      <form>
          <input
            name="isGoing"
            type="checkBox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
      </form>
    );
  }
}

不受控组件@H_502_42@：很简单，就是DOM自己维护状态的组件，不受react控制。你可以给它设置defaultValue，但是不能去setState。

<input type="text" ref={(input) => this.input = input} defaultValue="默认值"/>

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
 
  handleChange(e) {
    this.props.upDateValue(e.target.value);
  }
 
  render() {
    const {name,value} = this.props;
    return (
      <div>
        <p>{name}：</p>
        <input value={value}
               onChange={this.handleChange} 
          />
      </div>
    );
  }
}
 
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: '',name: ''};
    
    this.upDateValue = this.upDateValue.bind(this);
  }
 
  upDateValue(value) {
    this.setState({value: value})
  }
  
  render() {
    const {value} = this.state;
 
    return (
      <div>
        <Child name="组件1" value={value} upDateValue={this.upDateValue} />
        <Child name="组件2" value={value} upDateValue={this.upDateValue} />
      </div>
    );
  }
}
 
ReactDOM.render(
  <Demo />,document.getElementById('root')
);

class MyComponent extends React.Component {
    
}

//不推荐
class NextComponent extends MyComponent {
    
}