React@16.x（8）React 中的表单

1，受控和非受控组件

受控组件：组件的使用者，可以完全控制该组件的行为和内容。通常情况下，该组件没有自身的状态，其内容完全受到属性的控制。

非受控组件：组件的使用者，没有能力控制该组件的行为和内容。它们由自身完全控制。

表单组件，默认情况下是非受控组件。而如果设置了 value 属性，就变为受控组件了（单选和多选框，需要设置 checked 属性）。

2，简单封装

如果存在多个表单项，可以通过 e.target.type 判断表单类型。

2.1，下拉框 Select

export default class Select extends Component {
    handleChange = (e) => {
        this.props.onChange?.(e.target.value, this.props.name, e);
    };

    getOptions() {
        return this.props.datas.map((it) => (
            <option key={it.value} value={it.value}>
                {it.text}
            </option>
        ));
    }

    render() {
        const options = this.getOptions();
        return (
            <select name={this.props.name} value={this.props.value} onChange={this.handleChange}>
                {options}
            </select>
        );
    }
}

使用

import React, { Component } from "react";
import Select from "./components/Select";

const datas = [
    { value: "football", text: "足球" },
    { value: "basketball", text: "篮球" },
    { value: "movie", text: "电影" },
];

export default class App extends Component {
    state = {
        value: "",
        datas,
    };
    handleChange = (value, name, e) => {
        this.setState({
            value,
        });
    };
    render() {
        return (
            <>
                <div>{this.state.value}</div>
                <Select name="loves" {...this.state} onChange={this.handleChange} />
            </>
        );
    }
}

2.2，多选框 checkbox

export default class CheckBoxGroup extends Component {
    handleChange = (e) => {
        let newArr = [];
        if (e.target.checked) {
            newArr = [...this.props.chooseDatas, e.target.value];
        } else {
            newArr = this.props.chooseDatas.filter((it) => it !== e.target.value);
        }
        this.props.onChange?.(newArr, this.props.name, e);
    };
    getCheckBoxes() {
        return this.props.datas.map((it) => (
            <label key={it.value}>
                <input type="checkbox" name={this.props.name} value={it.value} checked={this.props.chooseDatas.includes(it.value)} onChange={this.handleChange} />
                {it.text}
            </label>
        ));
    }

    render() {
        return <div>{this.getCheckBoxes()}</div>;
    }
}

使用

import React, { Component } from "react";
import CheckBox from "./components/CheckBox";

const datas = [
    { value: "football", text: "足球" },
    { value: "basketball", text: "篮球" },
    { value: "movie", text: "电影" },
];

export default class App extends Component {
    state = {
        chooseDatas: [],
        datas,
    };
    handleChange = (value, name, e) => {
        this.setState({
            chooseDatas: value,
        });
    };
    render() {
        return (
            <>
                <div>{this.state.chooseDatas}</div>
                <CheckBox name="loves" {...this.state} onChange={this.handleChange} />
            </>
        );
    }
}

2.3，单选框 Radio

import React, { Component } from "react";

export default class RadioBoxGroup extends Component {
    handleChange = (e) => {
        this.props.onChange?.(e.target.value, this.props.name, e);
    };

    getRadios() {
        return this.props.datas.map((it) => (
            <label key={it.value}>
                <input type="radio" name={this.props.name} value={it.value} checked={this.props.value === it.value} onChange={this.handleChange} />
                {it.text}
            </label>
        ));
    }

    render() {
        return <div>{this.getRadios()}</div>;
    }
}

使用，和 Select 组件相同。

2.4，数字组件 NumberInput

只能输入数字。

import React, { Component } from 'react'

export default class NumberInput extends Component {
    state = {
        val: ""
    }
    render() {
        return (
            <input type="text" value={this.state.val}
                onChange={e => {
                    var val = e.target.value;
                    val = val.replace(/\D/g, "");
                    this.setState({
                        val
                    })
                }}
            />
        )
    }
}

---

以上。