Question

我是新反应的世界，我试图建立一个父组件与应该从一个子组件被调用的函数。但是，当我调用该函数时，标题中会出现错误消息。我有类似的东西：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myFunction = this.myFunction.bind(this);
  }

  myFunction(param) {
    //do something  
  }
  
  render(){
    return(
      <ChildComponent event={this.myFunction} />
    );
  }
 }
 
 
 class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inheritedFunction: this.props.event
    };
  }
  
  childFunction(param) {
    //do a few things first
    this.state.inheritedFunction(param);
  }
  
  render(){
    return(
     <input type="checkbox" onChange={this.childFunction.bind(this)></input>
    );
  }  
 }

我的代码编译和运行，然后当它得到在选择的复选框来执行childFunction（），this.state.inheritedFunction（PARAM）表示，它不是一个功能和应用程序崩溃。我怀疑它必须与绑定有关，但是我真的不确定并停留在此问题上。

我是新来的反应，所以请好的。 :-)任何人都知道我搞砸了？

Answer 1

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myFunction = this.myFunction.bind(this);
  }

  myFunction = (param) => {
    //do something  
    alert(param);
  }

  render(){
    return(
      <ChildComponent event={this.myFunction} />
    );
  }
 }


 class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inheritedFunction: this.props.event
    };
  }

  childFunction(param) {
    //do a few things first
    this.props.event(param);
  }

  render(){
    return(
     <input type="checkbox" onChange={this.childFunction.bind(this)></input>
    );
  }  
 }

Answer 2

我认为您的问题是试图在状态内保存引用，然后在onchange回调上再次绑定该函数。

删除构造函数上的state，然后直接从props调用

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myFunction = this.myFunction.bind(this);
  }

  myFunction(param) {
    //do something  
  }
  
  render(){
    return(
      <ChildComponent event={this.myFunction} />
    );
  }
 }
 
 
 class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childFunction = this.childFunction.bind(this); // bind on the constructor.
  }
  
  childFunction() {
    //do a few things first
    this.props.event(this) //call the prop directly here.
  }
  
  render(){
    return(
     <input type="checkbox" onChange={this.childFunction></input> // no more binding here
    );
  }  
 }

Answer 3

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  myFunction = param => {
    //do something
  };

  render() {
    return <ChildComponent event={this.myFunction} />;
  }
}

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  childFunction = (param) => {
    //do a few things first
    this.props.event(param);
  }

  render() {
    return <input type="checkbox" onChange={this.childFunction} />
  }
}

反应亲子沟通：类型错误：_this.state.myFunction不是一个函数

3 个答案: