javascript - 如何在react-redux中传递处理程序

我正在研究一个用react-redux编写的项目。我想将处理程序传递给子组件，以便可以从子组件触发处理程序。
我的父组件代码

import React from 'react';
import Input from 'src/containers/Input';

export default class AddChannelComponent extends React.Component<void, PropsType, void> {
  render() {
       function inputHandler (value){
            console.log("value  is",value);
       }

    return (
        <div >
          <p>Type your input</p>
          <div>
            <Input inputHandler={this.inputHandler} placeholder="Search all public channels..." />
          </div>
      </div>
    );
  }
}

Input是一个js文件，该文件调用组件InputComponent.js
Input.js文件的代码为：

import { connect } from 'react-redux';
import InputComponent from 'src/components/InputComponent';

const mapStateToProps = (state) => ({
});

const mapDispatchToProps = (dispatch) => ({
});

const Input = connect(
  mapStateToProps,
  mapDispatchToProps
)(InputComponent);

export default Input;

现在，我的InputComponent.js文件代码为：

import React from 'react';


export default class InputComponent extends React.Component<void, PropsType, void> {
     callHandler = event => {
          console.log("value in input",event.target.value);
          this.props.inputHandler(event.target.value)   <== Error Occur
     }
  render() {
    return (
      <input {...this.props}  onChange={this.callHandler}/>
    );
  }
}

this.props.inputHandler（event.target.value）给我这样的错误：_this.props.inputHandler不是函数。如何在子组件中调用父处理程序。
提前致谢。

最佳答案

  inputHandler = (value) => {
       console.log("value  is",value);
  }
  render() {
   ......

代替

render() {
   function inputHandler (value){
        console.log("value  is",value);
   }
   ......

在inputHandler类的范围内编写AddChannelComponent函数，然后使用this.inputHandler

如果您使用的是闭包函数（针对您的情况），请直接使用inputHandler作为

    <Input inputHandler={inputHandler} placeholder="Search all public channels..." />