React笔记(2)

表单

在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。表单元素通常自己维护state，根据用户的输入或点击行为，调用setState方法更新数据。

React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

export class NameForm extends Component {
    constructor(props){
        super(props);
        this.state = {value: ''}
    }

    handleChangeEvent = (event) => {
        this.setState({
            value: event.target.value
        })
    }

    handleSubmitEvent = (event) => {
        console.log(this.state.value);
        event.preventDefault();
    }

    render(){
        return (
            <form onSubmit={this.handleSubmitEvent}>
                <label>
                    Name:
                    <input type="text" value={this.state.value} onChange={this.handleChangeEvent}/>   
                </label>
                <input type='submit' value='submit'/>
            </form>
        )
    }
}
// 将input的value与state绑定，通过setState方法更新值，保证state为唯一数据源

以同样的方式定义select为受控组件：

export class FlavorForm extends Component {
    constructor(props){
        super(props);
        this.state = {value: 'coconut'}
    }

    handleChangeEvent =(e)=>{
        this.setState({
            value: e.target.value
        })
    }

    handleSubmitEvent = (e) => {
        console.log(this.state.value);
        e.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmitEvent}>
                <label>
                    Please Select:
                    <select value={this.state.value} onChange={this.handleChangeEvent}>
                        <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>
        )
    }
}

当需要处理多个 input 元素时，我们可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作。

状态提升

当两个同级组件需要相互通信时，若将组件的状态信息记通过state存在组件内部，则无法在组件之间共享。此时考虑变量提升，即将两个子组件的state信息提升到负组件中，并通过props将具体的值传入到子组件，同理将通过回调的方式在父组件中定义setState方法，这样使同级组件之间可以共享数据源，即为变量提升