Question

我正在开发一个用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>
    );
  }
}

输入是一个调用组件InputComponent.js的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不是函数的错误。如何在子组件中调用父处理程序提前谢谢。

Answer 1

  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..." />

Answer 2

只需短暂的回音：您是否尝试将inputHandler fn定义为类方法？您尝试通过this.inputHandler访问它，但fn是在render方法中定义的。

Answer 3

根据React Docs：

，您应该绑定方法

在JSX回调中你必须要小心这个含义。在JavaScript中，默认情况下不会绑定类方法。如果你忘记绑定this.handleClick并将其传递给onClick，那么在实际调用该函数时这将是未定义的。

这不是特定于React的行为;它是JavaScript中函数如何工作的一部分。通常，如果您在其后引用没有（）的方法，例如onClick = {this.handleClick}，则应绑定该方法。

如果调用bind会让你烦恼，有两种方法可以解决这个问题。如果您使用的是实验属性初始化程序语法，则可以使用属性初始值设定项来正确绑定回调

所以，在你的例子中：

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.bind(this)}/>
    );
  }
}

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

3 个答案: