React笔记(2)

·  阅读 82

表单

在 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方法,这样使同级组件之间可以共享数据源,即为变量提升

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改