含义

• 非受控组件：表单数据不受控与state的（未绑定value），使用React ref从DOM节点中获取表单数据的组件
• 提示refs弃用
  

class MyForm extends React.Component {constructor(props) {super(props)}submit = (e) => {e.preventDefault()console.log(this.refs.refName.value)}render() {return (<form onSubmit={this.submit}><div>用户名：<input type="text" ref="refName" placeholder="用户名" /></div>{/* onClick={this.submit} */}<div><button type="submit">提交</button></div></form>)}
}
ReactDOM.render(<MyForm />,document.getElementById('app')
)

• 使用hooks React.createRef
• 打印this.refName
  

class MyForm extends React.Component {constructor(props) {super(props)this.refName = React.createRef()this.refGender = React.createRef()this.refIsStu = React.createRef()this.refLans = React.createRef()}submit = (e) => {e.preventDefault()// console.log(this.refs.refName.value)console.log(this.refGender.current.value)}render() {return (<form onSubmit={this.submit}><div>{/* ref="refName"  改用hooks React.createRef */}用户名：<input type="text" placeholder="用户名" ref={this.refName} /></div>{/* onClick={this.submit} */}<div>性别：<select ref={this.refGender} defaultValue="male"><option value="female">女</option><option value="male">男</option></select></div><div>{/* radio checkbox不太适用于非受控组件 ref绑定*/}<p>是否学生：是<input type="radio" defaultChecked={true}/>否<input type="radio" /></p><p>掌握语言:粤语<input type="checkbox" />英语<input type="checkbox" defaultChecked={true} /></p></div><div><button type="submit">提交</button></div></form>)}
}
ReactDOM.render(<MyForm />,document.getElementById('app')
)

• 注意：只要使用了value就要绑定onChange事件or设置defaultValue
• defaultValue：form field的默认值，在组件挂载完毕后更新，不会导致DOM的更新