可以处理单选和多选表单更改的单个 onChange答案

【问题标题】：Single onChange that can handle single- and multi-select Form changes可以处理单选和多选表单更改的单个 onChange
【发布时间】：2019-12-18 13:14:46
【问题描述】：

我有一个 Form 和几个 Form.Select 属性。我的 onChange() 适用于没有 multiple 集的 <Form.Select> 属性。但是，它无法处理来自具有multiple 集的<Form.Select> 属性的选择。

我想要一个 onChange 函数来处理 Form.Select 实例的数据更改，无论是否设置了“多个”标志。

表单类：

class SomeForm extends React.Component {
    handleSubmit = event => {
        event.preventDefault();
        this.props.onSubmit(this.state);
    };


    onChange = event => {
        const {
            target: { name, value }
        } = event;

        this.setState({
            [name]: value
        });

        console.log("name: " + name)
        console.log("value: " + value)
    };

    render() {
        return (
            <Form onSubmit={this.handleSubmit} onChange={this.onChange}>

                <Form.Select label="Size" options={sizes} placeholder="size" name="size" />

                <Form.Select
                    label="Bit Flags"
                    placeholder="Bit flags"
                    name="flags"
                    fluid
                    multiple
                    search
                    selection
                    options={bits}
                />

                <Form.Button type="submit">Submit</Form.Button>
            </Form>
        );
    }
}

当我从带有multiple 集的Form 中选择选项时，永远不会调用日志。

填充Form.Select 的options 属性的一些可能位：

const bits = [
    {key: '1', text: "some text 1", value: "some_text_1"},
    {key: '2', text:  "some text 2", value:  "some_text_2"},
];

如何修改 onChange() 以处理上面列出的 Form.Select 属性？

请注意，这个问题与 StackOverflow 上的问题不同，后者只关注只能用于更新数组的 onChange。

【问题讨论】：

标签： reactjs semantic-ui-react

【解决方案1】：

多重选择是一种奇怪的野兽。 This post 描述了如何检索选定的值。

如果要定义表单级别的处理程序，则需要对多选进行异常处理：

    const onChange = (event) => {
        const value = isMultipleSelect(event.target)
          ? getSelectedValuesFromMultipleSelect(event.target)
          : event.target.value
        this.setState({[event.target.name]: value})
    };

    const isMultipleSelect = (selectTag) => selectTag.tagName === 'SELECT' && selectTag.multiple

    const getSelectedValuesFromMultipleSelect = (selectTag) => [...selectTag.options].filter(o => o.selected).map(o => o.value)

【讨论】：