用双列表框实现 redux 表单答案

【问题标题】：Implementing redux form with dual list box用双列表框实现 redux 表单
【发布时间】：2018-12-27 13:55:23
【问题描述】：

我在 react 应用程序中设置 redux 表单，在我有双列表框的表单中，我不能将值从一个框转移到另一个框，反之亦然。

我正在做的其他事情复选框切换它不会在页面加载时发布值，当我触摸/点击它时它会发布值，无论是 true/false 但不是默认 false。

对于双列表框

    <Field
        name="list"
        type="select"
        onChange={this.handleOnMove}
        component={this.renderReactSelectWrapper}
      />
  renderReactSelectWrapper = props => (
    <DualListBox
      value={props.input.value}
      onChange={props.input.onChange}
      onBlur={props.input.onBlur(props.input.value)}
      options={available}
      selected={selected}
      placeholder="Select"
      simpleValue
      icons={{
        moveLeft: <span key={0}>&lt;</span>,
        moveAllLeft: [<span key={1}>&lt;&lt;</span>],
        moveRight: <span key={2}>&gt;</span>,
        moveAllRight: [<span key={4}>&gt;&gt;</span>],
        moveDown: <span key={5}>&darr;</span>,
        moveUp: <span key={6}>&uarr;</span>
      }}
    />

  );

对于复选框/开关

<Field
                  name="available"
                  id="available"
                  component={this.renderToggleInput}
                />
  renderToggleInput = field => (    <Switch checked={field.input.value} onChange={field.input.onChange} /> );

我需要将值从一个框转移到另一个框，如果是复选框/开关，我需要在页面加载时发布。

【问题讨论】：

标签： react-redux redux-form

【解决方案1】：

我正在解决同样的问题。我认为问题是您没有正确更新选定的数组。以下代码在所选选项上对我有用。

    <DualListBox
      options={options}
      value={this.props.input.value}
      onChange={this.props.input.onChange}
      selected={[...this.props.input.value]}
    />

【讨论】：