ReduxForm - 从 Semantic-UI 选择输入中获取选择值

Question

我正在尝试使用 Redux Form 从 React Semantic-UI 中的组件获取下拉菜单的值。我已经成功接收到来自普通文本输入的值，但没有选择输入。

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

每当我提交表单时，即使我选择了其中一个下拉值，它也始终以空对象的形式返回。

Answer 1

我怀疑您可能需要做更多的手动工作才能使 Select 组件了解它应该如何处理您传递给它的 Redux 表单道具 ({...input})。所以例如，您可能需要在Select 的onChange signature 和Redux 表单的onChange 签名之间进行一些“翻译”。

  Status({ input, meta: {touched, error}, ...custom }) {
    const reduxFormOnChange = input.onChange;

    // the signature for this onChange is specific to
    // semantic-ui Select
    const semanticSelectOnChange = (maybe, wrong, order, or, irrelevant) => {
      // here we make the translation
      // so that the Redux form onChange gets
      // called correctly. 
      // (NOTE: this is an example, not actual code suggestion)
      reduxFormOnChange(or, maybe);
    };

    return (
      <Form.Field control={Select} 
        name="Status" label="Status" 
        options={status} placeholder="Status" 
        {...input} {...custom} 
        onChange={ semanticSelectOnChange } 
     />
    );
  }

其他属性也可能需要类似的过程。当然，您也可以使用 Redux devtools (for Firefox or Chrome) 等工具检查 Redux 表单调度的操作是否包含您期望的数据。