Question

我尝试过在ractjs applicaton中进行多个下拉菜单，但我需要设置此值的状态而不是设置值。然后尝试在表单提交中获取值，但statemembers未定义。有人可以帮我解决这个问题

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>
        );
    }

}

Answer 1

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

尝试一下：

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

live example

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

1 个答案: