4 Reactjs 不受控组件

未受控组件

如：<input />，<input onChanage={(e)=>{this.setState({name: e.target.value})}} />

只要不对value属性进行赋值，那么组件就是未受控组件，组件的值后续都不会被父组件控制

 

要编写一个未控制组件，你可以使用一个 ref 来获取组件的引用，从而获取组件的值

class NameForm extends React.Component {

  constructor(props) {

    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);

  }

 

  handleSubmit(event) {

    alert('A name was submitted: ' + this.input.value);

    event.preventDefault();

  }

 

  render() {

    return (

      <form onSubmit={this.handleSubmit}>

        <label>

          Name:

          <input type="text" ref={(input) => this.input = input} />

        </label>

        <input type="submit" value="Submit" />

      </form>

    );

  }

}

 

默认值

非受控组件可接收一个默认值作为初始值

render() {

  return (

    <form onSubmit={this.handleSubmit}>

      <input

          defaultValue="Bob"

          type="text"

          ref={(input) => this.input = input} />

      <input type="submit" value="Submit" />

    </form>

  );

}