react：受控组件与非受控组件

背景

<input value={this.state.inputValue} />

当用户对input进行操作时，没有对inputValue进行setState()操作，这个值不变，也就意味着input显示不变。

受控组件

每个状态的改变都有一个与之相关的处理函数。

inputChange = e => this.setState({value: e.target.value})   
render() {
    return (
        <input value="this.state.value" onChange={this.inputChange}/>
    )
}

表单举例：https://react.docschina.org/docs/forms.html

非受控组件

非受控组件数据是通过dom进行处理。使用场景：

• 必须手动操作dom元素，setState 实现不了
• 文件上传 <input type="file">
• 富文本编辑器，需要传入dom

例一

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    // 创建 ref
    this.nameInputRef = React.createRef()
    this.fileInputRef = React.createRef()
  }
 
  render() {
    return (
      <div>
        <input defaultValue={this.state.name} ref={this.nameInputRef} />
        <button onClick={this.alertName}>alertName</button>
      </div>
    );
    // or
    return (
		<div>
			<input type="checkbox" defaultChecked={this.state.flag} />
		</div>
	)
	// or
	return (
		<div>
			<input type="file" ref={this.fileInputRef} />
		</div>
	)
  }
  alertName = () => {
  	// 通过ref获取dom节点
	const elem = this.nameInputRef.current
	alert(elem.value)
  }
  alertFile = () => {
  	// 通过ref获取dom节点
	const elem = this.fileInputRef.current
	alert(elem.files[0].name)
  }
}

例二

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>
    );
  }
}

如官方文档中例子，此时将input通过ref暴露给组件，可以通过this.input进行访问。