React Component中的这个对象使用ES6类

我有一个MsgInput组件，其中textarea这onKeyUp触发一个处理函数。里面的处理函数，我尝试阅读使用this.props道具，但不知道为什么道具在这里不确定的。当然workaroud是使用。React Component中的这个对象使用ES6类

export class MsgInput extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    inputHandler(e) { 
    if(e.keyCode == 13 && !e.shiftKey) { 
     this.props.onNewMessage({content: e.target.value}); 
     e.target.value = ''; 
     e.preventDefault(); 
    } 
    } 

    render() { 
    return (
     <div className="controls"> 
      <textarea onKeyDown={this.inputHandler.bind(this)} className="msg-input" placeholder="Write something" disabled={!this.props.auth}></textarea> 
     </div> 
    ); 
    } 
}

来源

2016-12-01 Faiz Halde

的可能的复制[未定义不是对象评价this.state/this.props]（http://stackoverflow.com/questions/40774399/undefined-is-not-an-object-evaluating-this -state-这个道具） – Pineda

如果您使用的是反正变换，检查了'@ autobind'装饰：https://www.npmjs.com/package/core-decorators#autobind –

与ES6类阵营不会自动您的回调绑定到组件实例，所以你必须做你自己，你已经做了。否则this在回调中不可用。

this.inputHandler.bind(this)

这不是一个解决办法，但它的方式应该是。

另一种替代方法是利用这将自动绑定this ES6箭头功能。

<textarea onKeyDown={(e) => this.inputHandler(e)}></textarea>

警告：使用您的JSX内.bind或箭头功能将创建一个新的功能，在每一个渲染这是一种性能障碍。

正如你可以绑定在你的构造方法，它不会有箭头的功能性能损失的最后手段。

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

来源

2016-12-01 12:30:51 lustoykov

加上一个箭头的功能。绑定的电话似乎有些乏味到我 –

好的，谢谢;-)可以接受的答案，如果它清除的东西了。 – lustoykov

为什么要在每个渲染上创建一个新函数？我宁愿在构造函数里面加入'.bind'。 –

React Component中的这个对象使用ES6类

回答

相关问题