form

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第33天，点击查看活动详情

受控场景：输入文字后，点击按钮，在控制台回显value。

受控组件的特点就是组件受状态/props的影响，但不会直接操作DOM，reactDOM.render內部的机制会自动操作DOM。

代码实现：

 class App extends React.Component {
            state = { name: 'hello', age: 18 }
            //事件
            hanelChange = (e) => {
                console.log('hanelChange');

                //事件对象=>获取 input 值
                console.log(e.target.value);

                //同步
                this.setState({
                    name: e.target.value
                })
            }

            hanleClick = () => {
                console.log(this.state);
            }

            render() {
                return (
                    <div>
                        name:<input type="text" value={this.state.name} onChange={this.hanelChange} />
                        <button onClick={this.hanleClick}>commit</button>
                    </div>
                )
            }
        }

        //挂载容器
        ReactDOM.render(<App/>, document.getElementById("app"))
复制代码

增加表单格式，点击提交后组织默认事件并打印填写内容。

代码实现1：

 class App extends React.Component {
            state = { name: 'zhagnsan', age: 18, single: false, desc: 'info', hobby: 'playing' }


            // input : 两个方向 
            // input =>state onChange 事件绑定
            // state =>input value 属性绑定

            //事件
            hanelChange1 = (e) => {
                console.log('hanelChange');
                //事件对象=>获取 input 值
                console.log(e.target.value);
                //同步
                this.setState({
                    name: e.target.value
                })
            }

            hanelChange2 = (e) => {
                console.log(e.target.value);
                this.setState({ age: e.target.value })
            }

            hanelChange3 = (e) => {
                console.log(e.target.checked);
                this.setState({ single: e.target.checked })
            }

            hanelChange4 = (e) => {
                console.log(e.target.value);
                this.setState({ desc: e.target.value })
            }

            hanelChange5 = (e) => {
                console.log(e.target.value);
                this.setState({ hobby: e.target.value })
            }

            handleSubmit = (e) => {
                console.log(this.state);
                // 阻止默认行为
                e.preventDefault()
            }

            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        name:<input type="text" value={this.state.name} onChange={this.hanelChange1} />
                        age:<input type="number" value={this.state.age} onChange={this.hanelChange2} />
                        single:<input type="checkbox" value={this.state.single} onChange={this.hanelChange3} />
                        desc:<textarea value={this.state.desc} onChange={this.hanelChange4} />

                        <select value={this.state.hobby} onChange={this.hanelChange5}>
                            <option value="eatting">吃</option>
                            <option value="playing">玩</option>
                            <option value="sleeping">睡</option>
                        </select>
                        <input type="submit" value="commit" />
                    </form>
                )
            }

        }
        ReactDOM.render(<App />, document.getElementById("app"))
复制代码

缺点显而易见，那就是，代码过于冗余，方法事件写了一个又一个，有没有什么好方法，能够看起来更清晰一些呢？如下：（不过多说明）

代码实现2：

   hanelChange=(e)=>{
                let {target} = e.target
                let type = target.type
                let value = target.value
                let key = target.name
                this.setState({
                    [key]:value
                })
            }
            handleSubmit = (e) => {
                console.log(this.state);
                // 阻止默认行为
                e.preventDefault()
            }

            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        name:<input type="text" name="name" value={this.state.name} onChange={this.hanelChange} />
                        age:<input type="number" age="age" value={this.state.age} onChange={this.hanelChange} />
                        single:<input type="checkbox" name="chackbox" value={this.state.single} onChange={this.hanelChange} />
                        desc:<textarea value={this.state.desc} name="desc" onChange={this.hanelChange} />

                        <select value={this.state.hobby} name="select" onChange={this.hanelChange}>
                            <option value="eatting">吃</option>
                            <option value="playing">玩</option>
                            <option value="sleeping">睡</option>
                        </select>
                        <input type="submit" value="commit" />
                    </form>
                )
            }
复制代码

本篇过多ES6知识点，不过多解释，代码简单易懂。

晚安。