• ref
  • defaultValue defaultChecked
  • 手动操作 DOM 元素 ```jsx constructor(props) { super(props) this.state = { name: ‘pw’ } this.nameInputRef = React.createRef(); }

render() { return

{/ 使用 defaultValue 而不是 value， 使用ref /} {/ state 并不会随之改变 /} {this.state.name}

  1. <button onClick={alertName}></button>

}

alertName = () => { const elem = this.nameInputRef.current // 通过 ref 获取dom节点 alert(elem.value); }

  1. ```jsx
  2. render() {
  3.   return 
  4.     <>
  5.       <input type="file" ref={this.fileInputRef} />
  6.     </>
  7. }

使用场景

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

选择原则

  • 优先使用受控组件，符合 React 设计原则
  • 必须操作 DOM 时，再使用非受控组件