1

我正在尝试使用 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);

每当我提交表单时,它总是作为一个空对象返回,即使我选择了一个下拉值。

4

1 回答 1

1

我怀疑您可能需要做更多的手动工作,以使Select组件了解它应该如何处理您传递给它的 Redux 表单道具 ( {...input})。因此,例如,您可能必须在Redux 表单的onChange 签名Select一个签名之间进行一些“翻译”。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(用于 Firefox 或 Chrome)等工具检查Redux 表单调度的操作是否包含您期望的数据。

于 2017-09-10T10:27:11.713 回答