如何使用 Redux 表单和语义 UI 呈现 Select 字段

Question

我使用以下代码呈现 select 字段。该字段使用选项正确显示，但不能 select 值。我使用 redux 形式和语义 UI 反应。谁能帮我这个？谢谢

import React from 'react';
import {Form} from "semantic-ui-react";

const RenderFieldSelect = field => (
  <Form.Select
    {...field.input}
    label={field.label}
    options={field.options}
    placeholder={field.placeholder}
    fluid
  />
);

export default RenderFieldSelect



import React from 'react';
import { Field } from 'redux-form';
import { Form} from "semantic-ui-react";
import RenderFieldInput from '../formElements/Input';
import RenderFieldSelect from '../formElements/Select';
import {YES_NO} from '../formElements/SelectOptions';

class TestAttributes extends React.Component {
    render() {
        return (
            <div>
                <Form.Group widths="equal">
                    <Field name="test1" component={RenderFieldInput} label="test1"/>
                    <Field name="test2" component={RenderFieldInput} label="test2"/>
                </Form.Group>
                <Form.Group widths="equal">
                    <Field name="test3" component={RenderFieldSelect} label="test3" options={YES_NO}/>
                    <Field name="test4" component={RenderFieldInput} label="test4"/>
                </Form.Group>
            </div>
        );
      }
    }

export default TestAttributes;


export const YES_NO = [
                    { text: "Yes", value: "Yes" },
                    { text: "No", value: "No"}
                  ];

Answer 1

field.input 里有什么？来自 react semantic ui docs：

If you add a value prop or an open prop, the Dropdown delegates control for that one prop to your value. The other props remain auto controlled.

Answer 2

需要添加

onChange={(e, { value }) => field.input.onChange(value)}

希望能帮到有同样困惑的人。

如何使用 Redux 表单和语义 UI 呈现 Select 字段

How to Render Select Field using Redux Form and Semantic UI

html

reactjs

react-redux

semantic-ui

redux-form