如何通过 Push 事件获取 Field 值并将其传递给 FieldArray 值？ Redux-Form V6-RC3答案

【问题标题】：How to get Field value and pass it to FieldArray value with Push event? Redux-Form V6-RC3如何通过 Push 事件获取 Field 值并将其传递给 FieldArray 值？ Redux-Form V6-RC3
【发布时间】：2016-12-17 13:30:32
【问题描述】：

我有一个 FieldArray 组件应该显示电话。用户可以添加一个包含号码字段、类型字段和按钮的电话对象，将电话添加到电话列表（FieldArray）中。

电话列表组件包含一个带有函数 fields.remove(index) 的按钮，我将电话索引传递给它。

我的手机对象是： {number: number, type: type}

当前使用： React 0.15.3、Redux-Form 6.0.0-rc3、Material-UI 0.15.3

电话字段声明：

<Field name="phoneNumber" component={renderMaskedTextField} label={"Telefone"} type="text" mask="(99) 9999-99999"/>

<Field name="phoneType" component={renderSelectField} label="Tipo">
      {PHONE_TYPES.map((option, index) => {
        return <MenuItem value={option.value} primaryText={option.label} key={index}/>;
      })}
</Field>

我用来将电话组件添加到列表中的代码：

<IconButton onClick={() => handleAddClick({number: field.input.phone.number, type: field.input.phone.type})} style={styles.addButton}>
   <Add color="#fd084a"/>
</IconButton>

我需要一种方法来获取两个字段值并将其传递给我的 handleAddClick()

添加功能：

const handleAddClick = (phone) => {
   fields.push(phone);
};

也对解决这个问题的新方法持开放态度：D

【问题讨论】：

标签： reactjs material-ui redux-form

【解决方案1】：

您可以使用arrayPush() action creator。那么你只需要弄清楚如何获取dispatch 或在mapDispatchToProps 中预绑定动作创建者。

import { arrayPush } from 'redux-form'

@connect(
  mapStateToProps,
  { arrayPush }
)
class MyForm extends Component {

  ...

  handleAddClick(phone) {
    this.props.arrayPush('myForm', 'phones', phone)
  }

  ...
}

这有帮助吗？

【讨论】：

谢谢 Erik，但我的组件并不直接在我的表单中，它来自我为 Material-UI 组件提供的包装器。电话字段在 FieldArray 组件内，而 FieldArray 在我的表单组件内。我无权访问此材质 UI 包装器上的 mapStateToProps
使用导入的动作创建器，您可以从 any 组件中执行此操作，只要您知道表单和字段名称，因为您所要做的就是使用connect()获取dispatch，然后你可以dispatch(arrayPush())。
我明白了，那我试试看。非常感谢，我在寻找出路时遇到了非常糟糕的事情。