Получение ошибки «Не удается прочитать реквизиты неопределенного» при передаче дочернему компоненту для метода onChange

Question

Я получаю сообщение об ошибке «Не удается прочитать реквизиты неопределенного» при передаче функции onchange дочернему компоненту, однако, когда консоль регистрирует реквизиты, отображаются правильные свойства.

Я сделал это ранее, когда я передавал реквизит onClick дочерней кнопке, и это, кажется, работало нормально.

Сообщение об ошибке появляется только при попытке изменить поле.

Консоль регистрирует реквизиты

Родительский компонент

//Parent component
  onChange = e => {
    e.preventDefault();
    console.log(e);
  }

  render(){
    return(
      <div className="App">
        <div className="cardRow">             
              <Card question={this.state.currentCard.question} 
                    answer={this.state.currentCard.answer} 
                    source={this.state.currentCard.source}
                    onClick={this.submitUpdate.bind(this)}
                    recordChange={this.onChange.bind(this)}>{this.state.update}</Card>  
                .....
                
  //child component
  class Card extends Component {
    
    //the below code is where the error message is pointing
    recordChange(){
        this.props.recordChange();
    }

    onSubmit(){
        this.props.onSubmit();
    }

    render(props){
        console.log(this.props);
        return(
            <div className="card-container">
                    {this.props.children? 
                        <div className="cardUpdate"> 
                            <form className="update-form">
                                <h5>Front</h5>
                                    <input  type="text"
                                            value={this.props.question}
                                            onChange={this.recordChange}/>
                                <h5>Answer</h5>
                                <textarea  type="text"
                                            value={this.props.answer}
                                            onChange={this.recordChange}/>
                                <h5>Source</h5>
                                <input  type="text"
                                            value={this.props.source}
                                            onChange={this.recordChange}/>
                                <div>
                                    <button onClick={this.props.onClick}>Submit</button>    
                                </div>
                            </form>
                        </div>        
                        :
                            <div className="card">
                                <div className="front">
                                    <div className="question">{this.props.question}</div>
                                </div>
                                <div className="back">
                                    <div className="answer">{this.props.answer}</div>
                                    <div className="source">{this.props.source}</div>
                                </div>
                            </div>
                    }      
            </div>
        );
    }

Answer 1

recordChange не имеет доступа к this, как в контексте класса.

recordChange() {
  // 'this' is undefined.
  this.props.recordChange();
}

Однако, как вы заметили, console.log(this.props); внутри render работает нормально. Это потому, что render вызывается в контексте класса; тогда как recordChange не является.

Измените его на функцию стрелки, чтобы this находился в области видимости:

recordChange = () => {
  this.props.recordChange();
}

Или свяжите его с this в конструкторе:

constructor(props) {
  super(props);
  this.recordChange = this.recordChange.bind(this);
}

recordChange(){
  this.props.recordChange();
}

Или еще лучше:

Не используйте дочернюю функцию вообще. Если все, что он делает, это вызывает функцию из props, то это не нужно. Просто сделай onChange={this.props.recordChange}