受控组件与非受控组件

发表于   |   分类于

之前在看同事的问题时，她和我说了一句：“因为它是非受控组件……”。说实话，我是第一次接触到这样的概念，趁今晚有学习的念头，就了解一下吧。

react中的受控和非受控，是针对表单元素而言的。

受控组件

先看个例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }

  onChange = e => {
    this.setState({
      value: e.target.value
    });
  };
  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.onChange} />
        <span>{this.state.value}</span>
      </div>
    );
  }
}

export default App;

受控组件整体的规则是：

始终接受一个value属性，并添加一个可以更改value值的方法，使得我们可以控制value值的变更。

非受控组件

同样的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
    this.inputRef = React.createRef();
  }

  onClick = () => {
    this.setState({
      value: this.inputRef.current.value
    });
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} defaultValue={'hello world'} />
        <button onClick={this.onClick}>Get value</button>
        <span>{this.state.value}</span>
      </div>
    );
  }
}

export default App;

非受控组件的整体规则是：

可接受defaultValue作为初始值，然后组件状态的变更由底层维护，我们只关心最后通过ref获取到的组件的值，期间的状态变化不受我们控制。