Question

我试图从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);

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

Answer 1

我怀疑您可能需要做一些手动工作，以使Select组件了解它应该对您传递给它的Redux表单道具做什么（{...input}）。所以例如，您可能需要做一些＆＃34;翻译＆＃34;在onChange的{{1}} signature和Redux表单的一个Select签名之间。

onChange

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

ReduxForm - 从Semantic-UI选择输入

1 个答案: