无法在React

时间:2015-10-13 07:09:47

标签: reactjs

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

子:

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

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

1 个答案:

答案 0 :(得分: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的范围。