以编程方式更改Redux-Form字段的值

9 浏览
0 Comments

以编程方式更改Redux-Form字段的值

当我使用redux-form v7时，我发现没有办法设置字段的值。现在在我的form中，我有两个select组件。当第一个select组件的值改变时，第二个组件的值会被清除。

在类渲染中:

  site:
    
  net:

现在我添加了select变化的钩子，如何改变另一个select的值？

renderSelectField = props => {
  const {
    input,
    type,
    meta: { touched, error },
    ...others
  } = props
  const { onChange } = input
  const _onChange = value => {
    onChange(value)
    this.handleSelectChange({ value, type: input.name })
  }
  return (
    
  )
}

0

1 答案

0 Comments

问题：如何在Redux-Form中以编程方式更改字段的值？

原因：在Redux-Form中，更改字段的值需要使用Redux store中的change函数。该函数接受字段名称和新值作为参数，并将新值更新到Redux store中。

解决方法：首先，需要从redux-form库中导入change函数。然后，在组件中使用bindActionCreators将change函数绑定到dispatch上，以便可以在组件中调用change函数。在需要更改字段值的逻辑中，可以通过调用this.props.change来调用change函数，并传递字段名称和新值作为参数。

示例代码如下：

import { change } from "redux-form";
handleSelectChange = (value, type) => {
  if (type === "site") {
    this.props.change('net', "newValue");
  }
}
const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({change}, dispatch);
}

需要注意的是，change函数是从redux-form库中导入的，并且在调用change函数时需要传递正确的参数：字段名称和新值。

此外，如果需要同时设置多个字段的值，可以使用change函数的变体。通过传递一个包含字段名称和新值的对象作为参数，可以一次性更新多个字段的值。

解决方法来源于Redux-Form文档中的change函数的说明。在change函数的文档中，提供了详细的用法和参数说明。

通过使用Redux-Form库中的change函数，可以在Redux store中以编程方式更改字段的值。需要导入change函数，并将其绑定到dispatch上，然后在需要更改字段值的逻辑中调用change函数并传递正确的参数。如果需要同时更改多个字段的值，可以使用change函数的变体。

0