含义
- 非受控组件:表单数据不受控与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的更新