React JS - Prop重定向到ES6后undefined

Question

我不能为我的生活弄清楚下面的代码有什么问题，当用户通过BugAdd窗体添加一个bug时，值被传递给handleSubmit功能，反过来应该通过它的道具addBug。但是，当我提交表单时，我看到'console.log（“Adding bug：”，bug）;'

但之后，我收到“react.min.js：14未捕获的类型错误：无法读取未定义的属性'错误'，我最初的想法是，我可能错过了某处的.bind。

任何人能发现我的代码的问题，这是工作的罚款重构到ES6

class BugAdd extends React.Component { 
    render() { 
    console.log("Rendering BugAdd"); 
    return (
     <div> 
     <form name="bugAdd"> 
      <input type="text" name="owner" placeholder="Owner" /> 
      <input type="text" name="title" placeholder="Title" /> 
      <button onClick={this.handleSubmit.bind(this)}>Add Bug</button> 
     </form> 
     </div> 
    ) 
    } 

    handleSubmit(e) { 
    e.preventDefault(); 
    var form = document.forms.bugAdd; 
    this.props.addBug({owner: form.owner.value, title: form.title.value, status: 'New', priority: 'P1'}); 
    // clear the form for the next input 
    form.owner.value = ""; form.title.value = ""; 
    } 
} 

class BugList extends React.Component { 

    constructor() { 
    super(); 
    this.state = { 
     bugs: bugData 
    } 
    } 

    render() { 
    console.log("Rendering bug list, num items:", this.state.bugs.length); 
    return (
     <div> 
     <h1>Bug Tracker</h1> 
     <BugFilter /> 
     <hr /> 
     <BugTable bugs={this.state.bugs} /> 
     <BugAdd addBug={this.addBug} /> 
     </div> 
    ) 
    } 

    addBug(bug) { 
     console.log("Adding bug:", bug); 
     // We're advised not to modify the state, it's immutable. So, make a copy. 
     var bugsModified = this.state.bugs.slice(); 
     bug.id = this.state.bugs.length + 1; 
     bugsModified.push(bug); 
     this.setState({bugs: bugsModified}); 
    } 
} 

Answer 1

当使用ES6类扩展React.Component时，组件方法不会自动转换为this，例如当您使用React.createClass时。你可以在official documentation中阅读更多关于这方面的内容。

在你的情况，最干净的解决办法是在构造函数中addBug方法绑定到组件的this，就像这样：

class BugList extends React.Component { 

    constructor() { 
    super(); 
    this.state = { 
     bugs: bugData 
    } 
    this.addBug = this.addBug.bind(this); 
    } 

    render() { 
    console.log("Rendering bug list, num items:", this.state.bugs.length); 
    return (
     <div> 
     <h1>Bug Tracker</h1> 
     <BugFilter /> 
     <hr /> 
     <BugTable bugs={this.state.bugs} /> 
     <BugAdd addBug={this.addBug} /> 
     </div> 
    ) 
    } 

    addBug(bug) { 
     console.log("Adding bug:", bug); 
     // We're advised not to modify the state, it's immutable. So, make a copy. 
     var bugsModified = this.state.bugs.slice(); 
     bug.id = this.state.bugs.length + 1; 
     bugsModified.push(bug); 
     this.setState({bugs: bugsModified}); 
    } 
} 

现在，您将能够访问this.state。

Answer 2

尝试之前与=>它会自动绑定到类实例定义addBug方法是这样的：

addBug = (bug) => { 
     console.log("Adding bug:", bug); 
     // We're advised not to modify the state, it's immutable. So, make a copy. 
     var bugsModified = this.state.bugs.slice(); 
     bug.id = this.state.bugs.length + 1; 
     bugsModified.push(bug); 
     this.setState({bugs: bugsModified}); 
    } 

不要忘记类的属性变换添加到您的通天 http://babeljs.io/docs/plugins/transform-class-properties/