react学习笔记8--表单

react处理表单的正确方法是利用控制组件

在html中表单元素通常保持自己的状态并根据用户输入进行更新，而在react中，可变状态一般保存在组件的state属性中，并且只能通过setState()更新

使react的state成为单一数据源原则，渲染表单的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.preventDefault();
    }

    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>
        );
    }

}

class EssayForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value:'pls. write an essay'};
        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.preventDefault();
    }

    render() {
        return(
            <form onSubmit={this.handleSubmit}>
                <label>
                    Essay:
                    <textarea value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />

            </form>
        );
    }

}

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('a name was submitted:' + this.state.value);
        event.preventDefault();
    }

    render() {
        return(
            <form onSubmit={this.handleSubmit}>
                <label>
                    pick your favorite 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>

                    </select>

                </label>
                <input type="submit" value="Submit" />

            </form>
        );
    }

}

该标签允许用户输入文件，由于是只读，所以是不可控组件

处理复杂的输入

用event.target.name标识需要处理的input

class Reservation extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isGoing:true,
            numberOfGuest:2
        };
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked :target.value;
        const 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 guest:
                    <input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange}/>
                </label>
            </form>
        );
    }

}