Question

我使用以下代码来呈现选择字段。该字段正确显示了选项，但无法选择该值。我使用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：

如果添加值道具或开放道具，则下拉列表代表控制那个道具以达到您的价值。其他道具保持自动控制。

Answer 2

需要添加

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

希望这可以帮助其他人也有同样的困惑。

如何使用Redux表单和语义UI渲染选择字段

2 个答案: