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

Question

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

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

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

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

Phone 字段声明：

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

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

<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

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

  ...
}

有帮助吗？

如何通过 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

reactjs

material-ui

redux-form