无法在React

Question

我有一个子组件（提交按钮），我想放在父组件中。我希望孩子访问父方法。

子：

var SubmitButton = React.createClass({
  submitHandler: function(e) {
    e.preventDefault();
    this.props.submitHandler(e);
  },
  render: function() {
    return (
      <div className="Form--row">
        <button onClick={this.submitHandler}>Submit</button>
      </div>
    );
  }
});

现在，当我像这样打电话给孩子时，它起作用了：

var Form = React.createClass({
  submitHandler: function(e) {
       // do something
  },

  render: function() {
    return(
      <div className={classNames}>
        <form action="" className="Form">
            <SubmitButton submitHandler={this.submitHandler}/>
        </form>
      </div>
    )
  }
});

但是当我尝试像这样填充时，它会抛出一个错误：

render: function(e) {
    return(
        <div className={classNames}>
            <form action="" className="Form">
              {this.props.map(function(input) {
                if (input.inputType == 'button') {
                  return <SubmitButton submitHandler={this.submitHandler}/>;
                }
              })
              }
            </form>
          </div>
  )
}

错误：

Uncaught TypeError: Cannot read property 'submitHandler' of undefined

我想让第二种方法起作用，以便我可以使用随机子项填充父级。我在第二个片段中做错了什么？

Answer 1

你的问题在于：

{this.props.map(function(input) {
            if (input.inputType == 'button') {
              return <SubmitButton submitHandler={this.submitHandler}/>;
            }
          })

this现在属于您的函数范围，而不是您的组件，因此this对象上不存在该方法。

var that = this;

{this.props.map(function(input) {
            if (input.inputType == 'button') {
              return <SubmitButton submitHandler={that.submitHandler}/>;
            }
          })

您可以将this的值赋给函数范围之外的变量，并以这种方式引用它。

我建议您在Javascript中了解this的范围。