4

这可能有点疯狂和边缘情况，但如果我能让它工作，那就太好了。我使用 semantic-ui-react 作为组件库，但使用 redux-form 进行表单提交和验证。到目前为止，一起工作，虽然有点混乱，但很好。

目前，我正在尝试将语义 UI 反应组件与此处<Input />链接的组件一起使用。这是下拉列表附加到类似相关输入选项的输入的位置。尝试混合 redux-form 时会发生疯狂的事情。<Dropdown />

出于可重用性的目的，我已将输入的呈现移动到单独的方法中，所以这是我呈现下拉列表的方法：

  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>
    )
  }

这对于 a<Dropdown />及其 props 的语义 ui-react 代码都是正常的。

我从 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' />

因此，semantic-ui-react<Dropdown />被渲染为组件的 redux-form 字段的action组件<Input />- 嘴巴满了，是的，有点令人困惑，但它有点工作。上面的代码正如我所期望的那样工作，我可以在 redux-form 的 reducer 中获取字段的值（对于那个表单），但是css 都被抬高了。它看起来像这样：

在此处输入图像描述

在 redux 商店中：

在此处输入图像描述

因此，除了输入字段的 css 没有对齐之外，这一切都按照我的意愿工作。<Dropdown />烦人的部分是我可以将语义 UI 反应中的常规组件传递到action={ }第一个输入的道具中，尽管我无法访问下拉列表中的选择，但它看起来更好。代码如下所示：

<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 保存操作员（下拉菜单）值的能力，但看起来我想要最终结果。

4

0 回答 0