reactjs - 多个下拉值无法设置组件状态

问题描述

我在 ractjs 应用程序中尝试了多个下拉菜单，我需要设置状态值但不设置值。然后尝试在表单提交上获取值，但状态成员未定义。有人可以帮我解决这个问题

import { Dropdown } from 'semantic-ui-react'

class GroupCreation extends Component {
    constructor() {
        super();
        this.state = {
            name: '',
            members: [],
        }
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit = (event) => {
        console.log('handle submit event:', event);
        event.preventDefault();
        console.log('state values:', this.state);
    }
    render() {
        const { t } = this.props;

        if (this.props.DriverInfolistReducer.driverInfolist.length > 0) {
            this.driverUId = this.props.DriverInfolistReducer.driverInfolist.map((drivers, index) => {
                console.log('driver in group list:', drivers);
                return {
                    key: index,
                    text: drivers.userid,
                    value: drivers.userid
                };
            });
        }
        return (

            <AUX>
                <form onSubmit={this.handleSubmit} className="form-horizontal m-t-30">
                    <div className="form-group row">
                        <label htmlFor="members-input" className="col-sm-2 col-form-label">Members</label>
                        <div className="col-sm-10">
                            <Dropdown fluid multiple selection options={this.driverUId} onChange={(e, data) => this.setState({ members: data.values })} />
                        </div>
                    </div>
                    <div className="form-group row justify-content-end" >
                        <div className="button-items d-flex  p-l-10">
                            <Button size="sm" outline color="primary" onClick={this.clearInput} type="button">{t('Cancel')}</Button>
                        </div>
                        <div className="button-items d-flex p-l-10">
                            <Button size="sm" outline color="primary" type="submit" >{t('Save')}</Button>
                        </div>
                    </div>
                </form>
            </AUX>
        );
    }

}

标签： reactjssemantic-ui

回调函数的第二个参数onChange保存数据。

试试这个：

<Dropdown fluid multiple selection options={this.driverUId} value={this.state.members} onChange={(e,data) => this.setState({ members: data.value })} />

活生生的例子

reactjs - 多个下拉值无法设置组件状态

问题描述

解决方案

推荐阅读