如何使用 React 和 Redux Form 从不同的组件调用函数？答案

【问题标题】：How to call a function from different component using React with Redux Form?如何使用 React 和 Redux Form 从不同的组件调用函数？
【发布时间】：2018-10-04 13:44:39
【问题描述】：

当某些Field 接收到不同的值时，我试图从组件调用函数。

例如，我有一个组件“FieldSelections”，用户可以在其中从Field 中选择值。选择一个值后，我想从另一个名为 MyComponent 的组件调用函数 fieldValueChanged。

这是我尝试过的

class FieldSelections extends Component {
  handleChange = () => {
    this.child.fieldValueChanged();
  }
}

...

  <Field
      name='field'
      component={renderSelectField}
      onChange={this.handleChange}
  />
  <FieldArray
      name='fieldArray'
      component={MyComponent}
      ref={ obj => this.child = obj; }>
  </FieldArray>

MyComponent.js

class MyComponent extends Component {
  fieldValueChanged = () => {
    console.log('Do Something')
  }
}

但它给出了这个错误：

_this.child.fieldValueChanged 不是函数

我做错了什么？

【问题讨论】：

你能分享一个例子吗：-codesandbox.io
应该是this.props.fieldValueChanged();但不是 this.child.fieldValueChanged();

标签： reactjs redux-form react-redux-form

【解决方案1】：

改变

  handleChange = () => {
        this.child.fieldValueChanged();
  }

到

  handleChange = () => {
      this.props.fieldValueChanged();
  }

当在 MyComponent 中调用 FieldSelections 组件时，请确保将 fieldValueChanged() 作为 props 传递给它

调用 FieldSelections 时在 MyComponent 中

   <FieldSelections fieldValueChanged={this.fieldValueChanged} />

【讨论】：

问题是MyComponent只是用来返回数据，我没有在里面调用FieldSelections。
@Valip 这就是你需要实现来访问 this.props.fieldValueChanged();在 FieldSelections 组件中。 MyComponent 应该调用 FieldSelections。没有其他方法可以访问 FieldSelections 组件中的 fieldValueChanged