React 非受控组件

  1. 云栖社区>
  2. 博客>
  3. 正文

React 非受控组件

溜达向日葵 2018-07-23 14:39:45 浏览674
展开阅读全文

非受控组件(Uncontrolled Components)

使用非受控组件

在大部分情况下,推荐使用 受控组件 来实现表单、输入框等状态控制。在受控组件中,表单等数据都有React组件自己处理。这里将介绍另外一种非受控组件,表单的数据有Dom自己控制。

非受控组件实现的重点是用Refs特性获取真实Dom来代替每次数据变更去更新组件的状态值。

例如下面的代码,在非受控组件中记录被用户输入的名字:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    //在提交时,直接使用ref获取的真实Dom获取值
    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>
    );
  }
}

尝试代码

由于在非受控组件中使用Refs特性获取了真实Dom的实例,所以在使用非受控组建时,更容易集成React和非React代码,在某些时候也可以省略一些代码。但是建议除了特殊情况,都使用受控组件。

如果想要深入理解什么情况下使用哪种组件,建议阅读 受控和不受控表单输入 一文。

组件默认值

在React渲染的生命周期,表单中的value属性会被覆盖Dom中的value值。在使用非受控组件时,通常需要React设定一个默认初始值但是不再控制后续更新。基于这个案例,你可以指定一个defaultValue 属性来代替 value

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={(input) => this.input = input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

例如中“defaultValue = "Bob"”就是指定了一个默认值。同样地, <input type="checkbox"> 和 <input type="radio"> 支持 defaultChecked属性, <select> 标签支持 defaultValue属性。

网友评论

登录后评论
0/500
评论
溜达向日葵
+ 关注