含义
- 非受控组件：表单数据不受控与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>{}<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.refGender.current.value)}render() {return (<form onSubmit={this.submit}><div>{}用户名：<input type="text" placeholder="用户名" ref={this.refName} /></div>{}<div>性别：<select ref={this.refGender} defaultValue="male"><option value="female">女</option><option value="male">男</option></select></div><div>{}<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的更新
