表单元素（React）

React 中根据表单元素的使用方式，分为了两种：

非受控组件

受控组件

非受控组件

非受控组件，指的是组件不受 React 的控制。

非受控组件有以下三个特点：

输入框没有 value 属性，单复选框没有 checked 属性，下拉列表没有 selected 属性。

当用户从页面上去操作表单元素时，不会修改表单元素绑定的 state 或者 props；

当表单元素绑定的 state 或者 props 发生改变时，页面中的表单元素也不会发生改变；

非受控组件如果想要设置默认值或默认选择，应该使用 defaultValue 或 defaultChecked。

export default class FormElement extends Component {
    state = {
        inputValue: 'Hello'
    }
    render() {
        return (
            <div>
                <h1>非受控组件</h1>
                <p>{this.state.inputValue}</p>
                <input type="text" defaultValue={this.state.inputValue} />
                <button onClick={() => {
                    this.setState({
                        inputValue: 'world'
                    })
                }}>修改 inputValue</button>
            </div>
        )
    }
}

受控组件

受控组件，指的是组件完全受 React 的控制，即不受用户控制。

受控组件有以下三个特点：

输入框有 value 属性，单复选框有 checked 属性，下拉列表 select 身上有 value 属性。

当用户从页面上去操作表单元素时，会修改表单元素绑定的 state 或者 props；

当表单元素绑定的 state 或者 props 发生改变时，页面中的表单元素也会发生改变；

受控组件分为两种情况：

只读（用户不能操作）：添加 readOnly 属性；

双向数据绑定（用户可以操作）：添加 onChange 事件；

1. 输入框
   export default class FormElement extends Component {
   state = {
   inputValue: ‘Hello’
   }
   render() {
   const inputRef = createRef();
   return (
   

   
   

            <input type="text" ref={inputRef} value={this.state.inputValue} onChange={() => {
                // 获取到页面中用户的操作，将用户操作的值修改到 state 的值上去
                this.setState({
                    inputValue: inputRef.current.value
                })
            }}/>
        </div>
    )
   

   }
   }

2. 单选框
   export default class FormElement extends Component {
   state = {
   gender: ‘男’
   }
   render() {
   return (
   

   
   <input type=“radio” checked={this.state.gender === ‘男’} onChange={() => {
   this.setState({
   gender: ‘男’
   })
   }} /> 男
   <input type=“radio” checked={this.state.gender === ‘女’} onChange={() => {
   this.setState({
   gender: ‘女’
   })
   }} /> 女
   
   
   )
   }
   }

3. 复选框

export default class FormElement extends Component {
    state = {
        likes: ['吃饭', '睡觉'],
        isAgree: false,
    }
    likesChange = (e, value) => {
        if (e.target.checked) {
            this.setState({
                likes: [
                    ...this.state.likes,
                    value
                ]
            })
        } else {
            this.setState({
                likes: this.state.likes.filter(item => item !== value)
            })
        }
    }
    render() {
        return (
            <div>
                <input type="checkbox" checked={this.state.likes.some(item => item === '吃饭')} onChange={(e) => {
                    this.likesChange(e, '吃饭')
                }} /><label>吃饭</label>
                <input type="checkbox" checked={this.state.likes.some(item => item === '睡觉')} onChange={(e) => this.likesChange(e, '睡觉')} /><label>睡觉</label>
                <input type="checkbox" checked={this.state.likes.some(item => item === '打豆豆')} onChange={(e) => this.likesChange(e, '打豆豆')} /><label>打豆豆</label>

                <input type="checkbox" checked={this.state.isAgree} onChange={() => {
                    this.setState({
                        isAgree: !this.state.isAgree
                    })
                }}/><label>我已阅读并同意以上协议</label>
            </div>
        )
    }
}

4. 下拉列表

export default class FormElement extends Component {
    state = {
        city: 'sichuan'
    }
    render() {
        return (
            <div>
                <select value={this.state.city} onChange={(e) => {
                    this.setState({
                        city: e.target.value
                    })
                }}>
                    <option value="sichuan">四川</option>
                    <option value="yunnan">云南</option>
                    <option value="guizhou">贵州</option>
                </select>
            </div>
        )
    }
}