reactjs - react Webpack。为什么从子组件调用函数时会出现错误？

Question

我希望你能帮忙。我已经精简了很多代码，以使问题更易于阅读。

父组件将renderHack()函数传递给selectBlock组件。

该函数引发错误:未捕获类型错误:无法读取 null 的属性“props”

父组件

import React from 'react';
import ReactDOM from 'react-dom';
import SelectBlock from './SelectBlock.js';

export default class SiteFront extends React.Component {

  constructor(){
    super();
    this.state = {
     jsonData : []
    };

  renderHack(){
    console.log("renderHack Fired.");
  };

  render() {
    return (
      <div className="container">
        <div className="inner">

          <SelectBlock
            renderHack={this.renderHack.bind(this)}
          />

        </div>
      </div>
    );
  }
};

子组件

import React from 'react';
import ReactDOM from 'react-dom';

function submitHandler(e){
  e.preventDefault();
  this.props.renderHack();
};

export default class SelectBlock extends React.Component {
  render() {
    return (
    <form onSubmit={submitHandler}>
      <input type="submit" value="submit"/>
    </form>
    );
  }
};

编辑:感谢@azium。我将 onSubmit={submitHandler} 更改为 onSubmit={submitHandler.bind(this}) 并且它起作用了。

我不知道我做错了什么。我已经几个月没有做过 React 构建了，所以我有点生疏了。我认为这是正确的。

感谢您的帮助。
谢谢
萌

Answer 1

将 submitHandler 移至您的类中。它应该看起来像这样:

export default class SelectBlock extends React.Component {
  submitHandler(e){
    e.preventDefault();
    this.props.renderHack();
  }

  render() {
    return (
    <form onSubmit={this.submitHandler}>
      <input type="submit" value="submit"/>
    </form>
    );
  }
};

您收到错误的原因是 this 等于 submitHandler 内的 null，as it should be when a function is not called on an object 。

使用 submitHandler.bind(this) 是一种替代解决方案，但它感觉比仅仅让 submitHandler 成为组件类的方法更麻烦。一般来说，如果您需要访问组件调用的函数中的 props，它应该是组件类的方法，这样它就可以访问 this.props 而无需 bind .