react-表单

• 受控组件
  • input textarea select 用 value
  • checkbox radio 用 checked

受控组件--input框自己的状态被React组件状态控制

---

实现步骤 以获取文本框的值为例，受控组件的使用步骤如下：

1. 在组件的state中声明一个组件的状态数据
2. 将状态数据设置为input标签元素的value属性的值
3. 为input添加change事件
4. 在事件处理程序中，通过事件对象e获取到当前文本框的值（即用户当前输入的值）
5. 调用setState方法，将文本框的值作为state状态的最新值

import React from "react";
class FormComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            inputVal: "",
            textareaVal: "",
            selectVal: "",
            checkboxVal: true,
            radioVal: ''
        };
    }
    handleChangeInput = (e) => {
        this.setState({
            inputVal: e.target.value,
        });
    };
    handleChangeTextarea = (e) => {
        this.setState({
            textareaVal: e.target.value,
        });
    };

    handelChangeSelect = (e) => {
        this.setState({
            selectVal: e.target.value,
        });
    };

    handelChangeCheckbox = (e) => {
        this.setState({
            checkboxVal: !this.state.checkboxVal,
        });
    };

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

    render() {
        return (
            <form>
                <h1>{this.state.inputVal}</h1>
                <div>
                    <label htmlFor="inputName">姓名</label>
                    <input
                        id="inputName"
                        value={this.state.inputVal}
                        onChange={this.handleChangeInput}
                    />
                </div>
                <h1>{this.state.textareaVal}</h1>
                <div>
                    <label htmlFor="textaraName">信息</label>
                    <textarea
                        id="textaraName"
                        value={this.state.textareaVal}
                        onChange={this.handleChangeTextarea}
                    />
                </div>
                <h1>{this.state.selectVal}</h1>
                <div>
                    <label>选择</label>
                    <select
                        value={this.state.selectVal}
                        onChange={this.handelChangeSelect}
                    >
                        <option value="zhangsan">张三</option>
                        <option value="lisi">李四</option>
                        <option value="wangwu">王五</option>
                    </select>
                </div>
                <h1>{this.state.checkboxVal.toString()}</h1>
                <div>
                    <label>复选</label>
                    <input
                        type="checkbox"
                        checked={this.state.checkboxVal}
                        onChange={this.handelChangeCheckbox}
                    />
                </div>
                <h1>{this.state.radioVal}</h1>
                <div>
                    <label>单选  </label>
                    男<input
                        type="radio"
                        name="gender"
                        value='男'
                        checked={this.state.radioVal === '男'}
                        onChange={this.handelChangeRadio}
                    />
                    女<input
                        type="radio"
                        name="gender"
                        value='女'
                        checked={this.state.radioVal === '女'}
                        onChange={this.handelChangeRadio}
                    />
                </div>
            </form>
        );
    }
}
export const FormDemo = FormComponent;