React Semantic-UI のコンポーネントから Redux Form を使用してドロップダウン メニューの値を取得しようとしています。通常のテキスト入力から値を正常に受け取りましたが、入力を選択しませんでした。
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Button, Header, Icon, Modal, Transition, Form, Input, Select, TextArea, Dropdown } from 'semantic-ui-react';
import '../../index.css';
const status = [
{ key: 'Online', text: 'Online', value: 'Online' },
{ key: 'Offline', text: 'Offline', value: 'Offline' },
];
class NewInfoForm extends Component {
Status({ input, meta: {touched, error}, ...custom }) {
console.log({...custom})
return (
<Form.Field control={Select} name="Status" label="Status" options={status} placeholder="Status" {...input} {...custom} />
);
}
submit(values, dispatch) {
console.log(values)
}
render() {
const { handleSubmit } = this.props;
return (
<Transition animation="fade">
<Modal trigger={<a className="cursor-pointer"> <Icon name="add" /> </a>} closeIcon>
<Header content='New Info'/>
<Modal.Content>
<Form onSubmit={handleSubmit(this.submit.bind(this))}>
<h3 className="ui dividing header">Basic Information</h3>
<Form.Group>
<Field name="Status" component={this.Status} />
</Form.Group>
<Button type="submit" content='Submit Info' icon='add' labelPosition='right' color="green" />
</Form>
</Modal.Content>
<Modal.Actions>
</Modal.Actions>
</Modal>
</Transition>
);
}
}
export default reduxForm({
form: 'NewInfo'
})(NewInfoForm);
フォームを送信すると、ドロップダウン値の 1 つを選択したにもかかわらず、常に空のオブジェクトとして返されます。