本文主要是介绍react笔记 8-21 约束性 表单，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、约束性组件和非约束性组件
非约束性组件
<input type="text" name="" defaultValue={this.state.msg}></input>
这里他的value是用户输入的值 并没有执行操作 只是获取到了msg的值 用户输入不会改变数据
非约束性组件需要使用defaultValue获取数据 否则会报错约束性组件
<input type="text" name="" onChange={this.inputChange} value={this.state.msg}></input>
这里的value绑定了msg 因此由react管理 不可随意更改 由msg的改变而改变
当msg改变后 state会重新渲染2、表单 获取表单数据、修改数据
均采取 value绑定数据 onChange 通过change event对象获取数据 修改state中的数据
class List extends React.Component {constructor(props) {super(props)this.state = {msg: "react表单",name:"",sex:"1",city:"",citys:['北京','上海','深圳'],hobby:[{"title":"睡觉","checked":true},{"title":"吃饭","checked":false},{"title":"写代码","checked":true},],info:'',}}handelSubmit=(e)=>{e.preventDefault();console.log(this.state.sex);console.log(this.state.name);console.log(this.state.city);console.log(this.state.hobby);console.log(this.state.info);}handelName=(e)=>{this.setState({name:e.target.value})}handelSex=(e)=>{this.setState({sex:e.target.value})}handelCity=(e)=>{this.setState({city:e.target.value })}handelHobby=(key)=>{var hobby=this.state.hobby;hobby[key].checked =!hobby[key].checkedthis.setState({hobby:hobby})}handelInfo=(e)=>{this.setState({info:e.target.value})}}render部分
<form onSubmit={this.handelSubmit}>用户名: <input type="text" value={this.state.name} onChange={this.handelName} /><br />男 <input type="radio" value="1" checked={this.state.sex == 1} onChange={this.handelSex} />女 <input type="radio" value="2" checked={this.state.sex == 2} onChange={this.handelSex} /> <br />
radio通过value的1和2 于数据中sex 的1和2判断 如果相等则选中 修改sex sex只能为1 或者2
每次点击通过change事件带着value把sex中的数据修改为1或者2 居住城市:<select name="" value={this.state.city} onChange={this.handelCity}>{this.state.citys.map(function (val, key) {return (<option key={key}>{val}</option>)})}</select><br />
select中option渲染出来不能直接绑定 需要绑定select标签获取数据爱好：{this.state.hobby.map((val, key) => {return (<span key={key}>{val.title} <input type="checkbox" checked={val.checked} onChange={this.handelHobby.bind(this, key)} /></span>)})}
多选按钮需要将key传回通过key判断是数组中哪一个对象 这里通过bind将key和this传回(this必须写)<br /><textarea name="" id="" cols="30" rows="10" value={this.state.info} onChange={this.handelInfo} />
texteara写为单标签 于input绑定方式相同<br /><input type="submit" defaultValue="提交" />
直接写value不绑定数据会报错 因此写defaultValue</form>也可以选择使用ref
这篇关于react笔记 8-21 约束性 表单的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
