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')
)