react受控表单及其元素的使用

import React, { Component } from 'react';

class App extends Component {

    state = {
        namea: '一别之后，两处相悬',
        nameb: '说的是三四月',
        namec: '',
        named: '谁知是五六年',
        hobby: []

    }
    //  1-2 绑定ONchang事件，全局状态的值修改用setstate，全局的值为：打印事件对象找到对应的元素的值
    didInput = (event) => {
        console.log(event)
        this.setState({
            namea: event.target.value

        })
    }

    // 文本域
    didTextarea = (event) => {
        console.log(event)
        this.setState({
            nameb: event.target.value
        })
    }

    // 下来选择框
    didSelect = (event) => {
        console.log(event.target.name)
        this.setState({
            // namec:event.target.value,
            [event.target.name]: event.target.value
        })
    }

    // 下来选择框
    didSelect1 = (event) => {
        console.log(event.target.name)
        this.setState({
            named: event.target.value,
            // [event.target.name]:event.target.value 不生效
        })

    }

    // 复选框  每次选中在需要的标签内显示选中结果
    didname = (event) => {
        //     this.setState({
        //         [event.target.name]: event.target.value

        //     })
        //     console.log(event.target.value)
        //     // 如果只是这样做，此时发现不管是选中状态 还是取消状态控制台都会输出结果，而且对应的足见下面的文本this.state.hobby的结果若果选中多个只会出现一个因此要设置事件函数
        // }

        // 思路： 应该让全局的值为数组，每次选中之后的值都应该push进数字内，在push之前应该判断数组内是否已经有，有的话不改变，没有的话就push，避免二次选中时任然push，
        // 若果是取消则应该移出数组
        // 但是全局状态每次改变都要使用setstate，因此最好是新建个数组最后赋值,而且要考虑的触发不同的选项时，之前的选项也应该在，因此新数组的初始值应该是定义的全局的扩展运算
        // event.target.checked) 表示当前事件元素被选中
        let arr = [...this.state.hobby] //hobby是全局改变需要用setstate，新建数组方便
        // 但是如果我选中了第二个框之后，在选中第一个框，如果此时定义arr为空，则每次选中时arr都会变成空在执行下面代码。因此arr每次执行时要包含上一次选中的值，而这个值就是扩展后的全局hobby，
        if (event.target.checked) {  //判断是否被选中
            arr.push(event.target.value) //选中就加入新数组
        }
        else {
            // 为什么如下写法：如果要取消，说明之前已经选中，既然选中，那么一定在hobby（不是arr是因为最后会将arr赋值给hobby），因此使用hobby做判断找出符合的索引位置，移出他
            let checkboxIndex = this.state.hobby.findIndex(item => {
                event.target.value === item //找到取消项的索引值
            })
            arr.splice(checkboxIndex, 1)
        }
        this.setState({ //修改全局将arr的值给hobby
            hobby: arr
        })
    }
    render() {
        return (<div>
            {/* 1-1 设置全局状态，input的value值绑定对应的全局 */}

            {/* 1-input输入框 */}

            <input type="text" value={this.nema} onChange={this.didInput} />

            {/* 2-文本域 */}

            <textarea value={this.state.nameb} onChange={this.didTextarea}></textarea><span>{this.state.nameb}</span>
            {/* 不设置value也能输入文字，设置value属性，不设置onchange也能输入？这是个问题 */}

            {/* 3- 下拉框 */}

            <select name="namec" value={this.state.namec} onChange={this.didSelect}>
                <option value="拿数据">拿数据</option>
                <option value="渲染数据">渲染数据</option>
                <option value="现在无数据">现在无数据</option>
                <option value="以后服务器接收">以后服务器接收</option>
            </select>{this.state.namec}
            {/* 选中哪个下拉框的值就变为哪个 */}
            {/* 注意：选中哪个 后面的 this.state.namec 就变为那个选项的值得操作
                   
            1- name名字与其value对应全局状态一致，则事件函数内为 【event.target.name】 */}

            {/* 2-name名字与其value对应全局状态不一致，则事件函数内部要用 namec：event.target.value ,用方法1不会生效*/}
            <select name="namec" value={this.state.named} onChange={this.didSelect1}>
                <option value="数据">拿数据</option>
                <option value="渲染">渲染数据</option>
                <option value="无数据">现在无数据</option>
                <option value="服务器接收">以后服务器接收</option>
            </select>{this.state.named}

             {/* 四  复选框  */}
             <input type="checkbox" name='hobby' value='篮球' onChange={this.didname} />篮球
            <input type="checkbox" name='hobby' value='足球' onChange={this.didname} />足球
            <input type="checkbox" name='hobby' value='排球' onChange={this.didname} />排球
            <input type="checkbox" name='hobby' value='乒乓球' onChange={this.didname} />乒乓球
            <input type="checkbox" name='hobby' value='羽毛球' onChange={this.didname} />羽毛球
            <input type="checkbox" name='hobby' value='网球' onChange={this.didname} />网球
            <div>{this.state.hobby}</div>


            {/* 
           
            <input type="radio" name='sex' value='男' onChange={this.changeValue} /> 男
            <input type="radio" name='sex' value='女' onChange={this.changeValue} /> 女
            -------- 你选择的是： {this.state.sex}

             */}
      
        </div>


        )

    }
}

export default App;

// react 中 表单分为两种，一种是受控表单，一种是非受控表单

// 1- 受控表单：设置value属性的表单控件，只能通过onchange来双向绑定，否则值不会在视图改变，无法输入

//  input输入框

//  1-1 设置全局状态，input的value值绑定对应的全局

//  1-2 绑定ONchange事件，全局状态的值修改用setstate，全局的值为：打印事件对象找到对应的元素的值

// 2-文本域操作相同

// 3-下拉菜单

// 让选中的值出现在指定的标签内.

// 首先定义全局状态 定义给下拉框的value

// 选项的value获取，然后给下拉框设置事件onchange事件，使用setstate其全局状态的值为选中元素的值即可改变全局

// 若是下拉框的name值跟全局状态属性名相同，则 改变全局可以通过setstate [event.target.name]：event.target.value

// 4-复选框

// 多选框，选中哪个出现那个取消则消失

// 复选框的type是checkbox，多个复选框要求选中的出现，则要求name值与定义的全局一致

// 操作

// 定义全局状态，要为数组，选中多个，那么这个全局的值要有选中的值

// 定义全局事件，多个复选框要为同一个事件函数，根据选中的元素通过其name来赋值

//

// 全局事件的函数

// 思路：

// 应该让全局的值为数组，每次选中之后的值都应该push进数字内，在push之前应该判断数组内是否已经有，有不改变，没有就push，避免二次选中时仍然push， 如果是取消则应该移出数组

    // 但是全局状态每次改变都要使用setstate，因此最好是新建个数组最后赋值,而且要考虑的触发不同的选项时，之前的选项也应该在，因此新数组的初始值应该是定义的全局的扩展运算

   // event.target.checked) 表示当前事件元素被选中

  //hobby是全局改变需要用setstate，新建数组方便

   // 如果要取消，说明之前已经选中，既然选中，那么一定在hobby（不是arr是因为最后会将arr赋值给hobby），因此使用hobby做判断找出符合的索引位置，移出他

  // 但是如果我选中了第二个框之后，在选中第一个框，如果此时定义arr为空，则每次选中时arr都会变成空在执行下面代码。因此arr每次执行时要包含上一次选中的值，而这个值就是扩展后的全局hobby，

 // 再通过findIndex来寻找取消项的索引值

 // 通过setState修改全局，将arr的值赋值给hobby