Реакция родительско-дочернего взаимодействия: TypeError: _this.state.myFunction не является функцией - PullRequest
Новая
       6

Реакция родительско-дочернего взаимодействия: TypeError: _this.state.myFunction не является функцией

0 голосов
/ 01 февраля 2019

Я новичок в мире React и пытаюсь создать родительский компонент с функцией, которая должна вызываться из дочернего компонента.Однако, когда я вызываю функцию, я получаю сообщение об ошибке в заголовке.У меня что-то похожее: 

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) говорит, что это не такфункция и приложение рушится.Я подозреваю, что это связано с привязкой, но я действительно не уверен и застрял с этой проблемой.

Я новичок в React, поэтому, пожалуйста, будьте добры.:-) Кто-нибудь знает, что я испортил?

Ответы [ 3 ]

0 голосов
/ 01 февраля 2019

Я думаю, что ваша проблема заключается в попытке сохранить ссылку внутри состояния, а затем при обратном вызове 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
    );
  }  
 }
0 голосов
/ 01 февраля 2019 
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} />
  }
}
0 голосов
/ 01 февраля 2019 
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>
    );
  }  
 }
...