011|React之Uncontrolled Component

在前面的课程中，我们介绍了在React中如何处理表单。通过截获控件onChange方法，从而将value控制于组件中的模式叫做Controlled Component。

ControlledComponent的一个特点是代码量大，较为麻烦。在React中，还有另一种处理表彰的模式，叫UncontrolledComponent。

前一节中我们介绍了React中一个非常重要的特性：Ref函数。利用Ref函数，可以帮助我们实现UnControlled Component。

UnControlled Component不截获控件的值，而是通过Ref函数，获取到控件DOM，每次取值时直接从DOM中取。

通过下面的例子来了解一下：

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); // 根据DOM获取value
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />  // 使用ref函数记录下DOM
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

使用Uncontrolled Component 模式下，可以使用defaultValue来给控件设置初始值：

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob" // 使用defautValue设置初始值
          type="text"
          ref={(input) => this.input = input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

如何优化React性能？

好，这一节就到这里。现这里，你已经达到React中级水平，后续我将介绍更多React高级技术。

想学计算机技术吗？需要1对1专业级导师指导吗？想要团队陪你一起进步吗?欢迎加我为好友！微信号：iTekka。