Semantic-Ui-React输入，使用Redux-Form下拉列表

Question

这可能是一个有点疯狂和边缘的情况，但如果我能让这个工作的话会很棒。我使用semantic-ui-react作为组件库，但使用redux-form进行表单提交和验证。到目前为止，在一起工作时，虽然有点混乱，但没关系。

目前，我正在尝试在链接here的<Input />组件旁边使用语义-ui-react <Dropdown />组件。它是下拉列表附加到类似相关输入选项的输入的位置。尝试混合使用redux-form时会发生疯狂的事情。

为了可重用性，我已将输入的渲染移动到单独的方法中，因此这是我渲染下拉列表的方法：

  renderDropdownField( field ) {
    const {meta: {touched, error}} = field;
    const className                = `form-group ${touched && error ? 'error' : ''}`;
    return (
        <div className={className}>
          <Form.Dropdown
              {...field.input}
              className='field'
              label={field.label}
              basic={field.basic}
              button={field.button}
              options={field.options}
              placeholder={field.label}
              onChange={( e, {value} ) => field.input.onChange(value)} />
        </div>
    )
  }

对<Dropdown />及其道具的语义 - 反应代码来说，这是正常的。

我从redux-form <Field />组件调用该方法，如下所示：

<Field name='filter.threshold'
       label='Threshold'
       searchable='true'
       component={this.renderInputField}
       action={<Field name='filter.operator'
                      basic='true'
                      button='true'
                      component={this.renderDropdownField}
                      options={operatorOptions} />}
       actionPosition='left' />

因此，语义ui-react <Dropdown />被呈现为action组件的<Input />的redux-form字段的组件 - 嘴巴满是，并且有点混乱但它有点工作。上面的代码正如我所期望的那样，我可以在redux-form的reducer（对于那个表单）中得到字段的值， BUT css是全都搞砸了。它看起来像这样：

并在redux商店中：

所以这一切都正常，因为除了排队的输入字段的css之外我还喜欢它。令人讨厌的部分是我可以将一个常规的<Dropdown />组件从语义ui-react传递到第一个输入的action={ } prop并且看起来更好虽然我失去了访问权限从下拉列表中选择。代码如下：

<Field name='filter.threshold'
       label='Threshold'
       searchable='true'
       component={this.renderInputField}
       action={<Dropdown name='filter.operator'
                      basic='true'
                      button='true'
                      options={operatorOptions} />}
       actionPosition='left' />

，它呈现如下：

所以底线是我希望它看起来像这样（上图），但就像原始的代码片段一样。如果我按最后一种方式操作，则无法访问redux-form保存操作符（下拉列表）值的功能，但看起来我想要最终结果。