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

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

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

该函数引发错误：Uncaught TypeError: Cannot read property 'props' of null

父组件

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了，所以我有点生锈。我认为这是正确的。

感谢您的帮助。
谢谢
萌

最佳答案

将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，as it should be when a function is not called on an object中的null等于submitHandler。

使用submitHandler.bind(this)是一种替代解决方案，但是与仅将submitHandler用作组件类的方法相比，它感觉更hacky。通常，如果您需要在组件调用的函数中访问props，则它应该是组件类的方法，这样它就可以访问this.props而不需要bind。