1、案例如下
import React from ‘react‘; /** * 非约束性组(类似defaultValue等属性,不可以程序修改): <input type="text" defaultValue="a" /> 这个 defaultValue 其实就是原生DOM中的 value 属性。 这样写出的来的组件,其value值就是用户输入的内容,React完全不管理输入的过程。 约束性组件(可以修改属性值): <input value={this.state.username} type="text" onChange={this.handleUsername} /> 这里,value属性不再是一个写死的值,他是 this.state.username, this.state.username 是由 this.handleChange 负责管理的。 这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后,由于 this.setState 导致了一次重新渲染。 不过React会优化这个渲染过程。看上去有点类似双向数据绑定 */ class Home6 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( <div> 这是HOME6组件 <br/> {this.state.msg} <p>for表单获取值</p> <form onSubmit={this.handelSubmit}> 用户名:<input type="text" value={this.state.name} onChange={this.handelName}/> <input type="radio" value="1" checked={this.state.sex==1} onChange={this.changeSex}/>男 <input type="radio" value="2" checked={this.state.sex==2} onChange={this.changeSex}/>女 <br/> <input type="submit" defaultValue="提交"/> <br/> 居住城市: <select value={this.state.city} onChange={this.getCity}> { this.state.citys.map(function (value,key) { return <option key={key}>{value}</option> }) } </select> <br/> 爱好: { //注意key值指向 this.state.hobby.map( (value,key)=>{ return (<span key={key}> <input type="checkbox" checked={value.checked} onChange={this.changeHobby.bind(this,key)}/>{value.title} </span>) }) } <br/> 评论区: <textarea value={this.state.info} onChange={this.handleInfo}> </textarea> </form> </div> ) } } export default Home6;
原文地址:https://www.cnblogs.com/ywjfx/p/10421666.html
时间: 2024-10-07 07:24:14