React学习笔记（十）受控组件

//受控组件
class NameForm extends React.Component{
constructor(props){
super(props);
this.state = {value:''}

this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event){
this.setState({value:event.target.value})
}
handleSubmit(event){
alert('A name was submitted : ' + this.state.value)
event.preventDefult();
}
render(){
return(
<form onSubmit={this.handleSubmit}>
<label>
name:
<input type="text" value={this.state.value} onChange={this.handleChange}/>
</label>
<input type="submit" value="Submit"/>
</form>
)
}
}
ReactDOM.render(
<NameForm/>,
document.getElementById('name')
)

//textarea标签
class EssayForm extends React.Component{
constructor(props){
super(props);
this.state = {
value:'Please write an essay about your favorite DOM element.'
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event){
this.setState({value:event.target.value})
}
handleSubmit(event){
alert('An essay was submitted ' + this.state.value)
}

render(){
return(
<form onSubmit={this.handleSubmit}>
<label>
name:
<textarea value={this.state.value} onChange={this.handleChange}/>
</label>
<input type="submit" value="submit"/>
</form>
)
}
}
ReactDOM.render(
<EssayForm/>,
document.getElementById('name2')
)

//select标签
class FlavorForm extends React.Component{
constructor(props){
super(props)
this.state = {value:'coconut'}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event){
this.setState({value:event.target.value})
}
handleSubmit(event){
alert('You favorite flavor is: ' + this.state.value)
event.preventDefault();
}
render(){
return(
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite La Croix flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">grapefruit</option>
<option value="lime">lime</option>
<option value="coconut">coconut</option>
<option value="mango">mango</option>
<option value="grapefruit">grapefruit</option>
</select>
</label>
<input type="submit" value="submit"/>
</form>
)
}
}
ReactDOM.render(
<FlavorForm/>,
document.getElementById('FlavorForm')
)

//多个输入的解决方法
//当你有处理多个受控的input元素时，你可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。

class Reservation extends React.Component{
constructor(props){
super(props)
this.state = {
isGoing:true,
numberOfGuests:2
}
this.handleInputChange = this.handleInputChange.bind(this)
}
handleInputChange(event){
const target = event.target,
value = target.type === 'checkbox' ? target.checked : target.value,
name = target.name

this.setState({
[name]:value
})
}
render(){
return(
<form>
<label>
is going:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange}
/>
</label>
<br/>
<label>
number of guests:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange}
/>
</label>
</form>
)
}
}ReactDOM.render(
<Reservation/>,
document.getElementById('Reservation')
)