react改变checkbox的文字类型_React 之form表单、select、textarea、checkbox使用

import React from 'react';/**

* 非约束性组(类似defaultValue等属性，不可以程序修改):

这个 defaultValue 其实就是原生DOM中的 value 属性。

这样写出的来的组件，其value值就是用户输入的内容，React完全不管理输入的过程。

约束性组件(可以修改属性值)：

这里，value属性不再是一个写死的值，他是 this.state.username, this.state.username 是由 this.handleChange 负责管理的。

这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后，由于 this.setState 导致了一次重新渲染。

不过React会优化这个渲染过程。看上去有点类似双向数据绑定*/

classHome6 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:''};

}/**

* 获取用户名

* @param e*/handelSubmit=(e)=>{//阻止submit的提交事件

e.preventDefault();

console.log(this.state.name,this.state.city);

}

handelName=(e)=>{this.setState({

name:e.target.value

})

}/**

* 男女单项选择

* @param e*/changeSex=(e)=>{this.setState({

sex:e.target.value

})

}/**

* 获取select中的城市*/getCity=(e)=>{this.setState({

city:e.target.value

})

}/**

* 注意：爱好有多个值

* @param e*/changeHobby(key){var hobby = this.state.hobby;

hobby[key].checked=!hobby[key].checked;this.setState({

hobby:hobby

})

}

handleInfo=(e)=>{this.setState({

info:e.target.value

})

}

render() {return(

这是HOME6组件
{this.state.msg}

for表单获取值

用户名:

男女

居住城市:{this.state.citys.map(function (value,key) {return {value}})

}

爱好:

{//注意key值指向

this.state.hobby.map( (value,key)=>{return (

{value.title})

})

}
评论区:

)

}

}

exportdefault Home6;