- 不可控组件和可控组件介绍
不可控组件
如下：
<input type="text" defaultValue="Hello World"/>
input元素中有个默认值 为HelloWorld这个字符串 我们知道React组件是将数据绑定到状态中 如上给input元素直接绑定了默认值 这样有可能使元素的值和组件中状态绑定的值不统一 当我们要获取input的输入值时就得给input 加一个ref值 然后 var inputValue=React.findDomNode(this.refs.input).value 这样获得input的输入值 很麻烦
实例：
<script type="text/jsx">
var MyForm = React.createClass({
handleSubmit:function (event) {
{//阻止浏览器的默认事件}
event.preventDefault();
var helloTo = ReactDOM.findDOMNode(this.refs.helloTo).value;
alert(helloTo);
},
render:function () {
return <form onSubmit={this.handleSubmit}>
<input type="text" ref="helloTo" defaultValue="Hello World"/>
<button type="submit"> Click</button>
</form>
}
});
ReactDOM.render(<MyForm/>,document.body);
可控组件
如下：
<input type="text" defaultValue={this.state.value}
这样写 要获取input的输入值就
var inputValue = this.state.value
实例：
var MyForm = React.createClass({
getInitialState:function () {
return {
helloTo:'Hello World'
}
},
handleChange:function (event) {
console.log(this.state.helloTo);
this.setState({
helloTo:event.target.value,
})
},
handleSubmit:function (event) {
event.preventDefault();
alert(this.state.helloTo)
},
render:function () {
return <form onSubmit={this.handleSubmit}>
<input type="text" defaultValue={this.state.helloTo} onChange={this.handleChange}/>
<button type="submit">Click</button>
</form>
}
});
ReactDOM.render(<MyForm/>,document.body);
组件可控的好处
- 符合React数据流
- 数据存储在State中，便于使用
- 便于对数据进行处理
不同表单元素的使用
首先看有那些常见的表单元素
1、<label htmlFor="name">Name</label>
<select value={this.state.helloTo} onChange={this.handleChange}>
<option value="one">一</option>
<option value="two">二</option>
</select>
select的值就是被选中的option的值，当option被选中时 会多一个selected属性
表单元素实例
var MyForm = React.createClass({
getInitialState:function () {
return{
username:'',
sex:'1',
checked:true,
}
},
handleSubmit:function (event) {
event.preventDefault();
console.log(this.state);
},
handleNameChange:function (event) {
this.setState({
username:event.target.value,
})
},
handleSexChange:function (event) {
this.setState({
sex:event.target.value,
})
},
handleCheckedChange:function (event) {
this.setState({
checked:event.target.checked
})
},
render:function () {
return <form onSubmit={this.handleSubmit}>
<input id="usrname" type="text" value={this.state.username} onChange={this.handleNameChange} placeholder="请输入用户名"/>
<select value={this.state.sex} onChange={this.handleSexChange}>
<option value="0">女</option>
<option value="1">男</option>
</select>
<label htmlFor="input">同意用户协议</label>
<input type="checkbox" id="input" checked={this.state.checked} onChange={this.handleCheckedChange}/>
<button type="submit">注册</button>
</form>
}
});
事件处理函数的复用
复用的两种方式：
一：bind复用
写函数时要有两个参数 第一个通常是name 第二个 Event
handleChange:function(name,event){
…
}
调用时有两个参数 一个是this另一个是字符串 指明是谁调用
{this.handleChange.bind(this,‘input’)}
实例：
//事件处理函数的复用----bind复用
var MyForm = React.createClass({
getInitialState:function () {
return {
username:'',
gender:'1',
checked:true,
}
},
handleChange:function (name,event) {
//构造新对象的原因是如果直接写入name 会被解析成字符串name而不是变量name
var newState ={}
newState[name] = name == 'checked' ? event.target.checked :event.target.value;
this.setState(newState);
},
handleSubmit:function (event) {
event.preventDefault();
console.log(this.state);
},
render:function () {
return <form onSubmit={this.handleSubmit}>
<input type="text" onChange={this.handleChange.bind(this,'username')} placeholder="请输入用户名：" value={this.state.username}/>
<select value={this.state.gender} onChange={this.handleChange.bind(this,'gender')}>
<option value="0">女</option>
<option value="1">男</option>
</select>
<input type="checkbox" id="checkBox" onChange={this.handleChange.bind(this,'checked')} checked={this.state.checked}/>
<label htmlFor="checkBox">同意用户协议</label>
<button type="submit">注册</button>
</form>
}
});
二：name 复用
给元素添加name
构造函数：
handleChange:function(event){
var name = event.target.name
…
}
调用函数
{this.handleChange}
实例：
//事件处理函数的复用----name复用
var MyForm = React.createClass({
getInitialState:function () {
return {
username:'',
gender:'1',
checked:true,
}
},
handleChange:function (event) {
//构造新对象的原因是如果直接写入name 会被解析成字符串name而不是变量name
var newState ={}
newState[event.target.name] = event.target.name == 'checked' ? event.target.checked :event.target.value;
this.setState(newState);
},
handleSubmit:function (event) {
event.preventDefault();
console.log(this.state);
},
render:function () {
return <form onSubmit={this.handleSubmit}>
<input type="text" onChange={this.handleChange} placeholder="请输入用户名：" value={this.state.username} name="username"/>
<select value={this.state.gender} onChange={this.handleChange} name="gender">
<option value="0">女</option>
<option value="1">男</option>
</select>
<input type="checkbox" id="checkBox" onChange={this.handleChange} checked={this.state.checked} name="checked"/>
<label htmlFor="checkBox">同意用户协议</label>
<button type="submit">注册</button>
</form>
}
});
表单组件自定义