反应es5 vs es6

我一直在尝试在过去的几周里学习React和Redux。我似乎无法正确传递一个属性作为属性，当我运行它时，我得到了一个“无法读取属性”的null属性。但是在网上找到一些代码，我可以使用es5语法来尝试它，并且它工作正常有谁知道我在做什么错在ES6，我怎样才能使它发挥作用呢？下面是我尝试在ES6不与注释掉ES5风格，确实工作。反应es5 vs es6

import React, { Component, PropTypes } from 'react' 

export default class InputFoo extends Component { 
    //export default React.createClass({ 

    submitHandler(evt){ 
    evt.preventDefault() 
    const { inputFooAction } = this.props 

    inputFooAction(evt.target[0].value); 
    } 
    //, 

    render() { 
    const { input } = this.props 
    return (<div> 
       <h1>Oh hey from inside the component {input}</h1> 
       <form onSubmit={this.submitHandler}> 
       <input type="text" id="theInput"/> 
       </form> 

      </div>) 
    } 
}//) 

//block below is commented out for es5 
InputFoo.propTypes = { 
    inputFooAction: PropTypes.func, 
    input: PropTypes.string 
}

来源

2016-09-28 Peter3

它可能会更清楚，如果你把ES2015代码在一个片段，并在另一个的（工作）ES5解决方案。另外，请包括发生错误的地方。 –

可能重复[无法访问事件处理程序中的React实例（this）]（http://stackoverflow.com/questions/29577977/unable-to-access-react-instance-this-inside-event-handler） –

There提供了很多很棒的答案。我真的很感激时间。多个答案是正确的，我选择了第一个作为决胜者的人。我没有意识到我需要手动附加功能。感谢大家！ – Peter3

我准备工作为你演示在这里：http://codepen.io/PiotrBerebecki/pen/dpRdKP

没有自动绑定ES6类新让你onSubmit事件需要进行如下处理：

<form onSubmit={this.submitHandler.bind(this)}>

或甚至更好：

constructor() { 
    super(); 
    this.submitHandler = this.submitHandler.bind(this) 
} 
// then you can 
<form onSubmit={this.submitHandler}>

这里是全码这表明从输入字段传递数据在子部件（InputFoo）到母部件（App）实测值：

class App extends React.Component { 
    constructor() { 
    super(); 
    this.handleData = this.handleData.bind(this); 
    this.state = { 
     fromChild: '' 
    }; 
    } 

    handleData(data) { 
    this.setState({ 
     fromChild: data 
    }); 
    } 

    render() { 
    return (
     <div> 
     <InputFoo handlerFromParant={this.handleData} /> 
     <h5>Received by parent:<br />{this.state.fromChild}</h5> 
     </div> 
    ); 
    } 
} 


class InputFoo extends React.Component { 
    constructor() { 
    super(); 
    this.handleChange = this.handleChange.bind(this); 
    this.submitHandler = this.submitHandler.bind(this); 
    this.state = { 
     inputField: '' 
    }; 
    } 

    submitHandler(evt) { 
    evt.preventDefault(); 
    // pass the input field value to the event handler passed 
    // as a prop by the parent (App) 
    this.props.handlerFromParant(this.state.inputField); 

    this.setState({ 
     inputField: '' 
    }); 
    } 

    handleChange(event) { 
    this.setState({ 
     inputField: event.target.value 
    }); 
    } 

    render() { 
    return (
     <div> 
     <form onSubmit={this.submitHandler}> 
      <input type="text" 
       id="theInput" 
       value={this.state.inputField} 
       onChange={this.handleChange} /> 
      <input type="submit" /> 
     </form> 
     <h5>Visible in child:<br />{this.state.inputField}</h5> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('app') 
);

来源

2016-09-28 13:16:25

在React中使用es2015类时，您需要手动将this绑定到您的类方法。你可以在你的构造函数（这是recommended）：

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

或处理程序设置为您onSubmit道具时：

<form onSubmit={this.submitHandler.bind(this)}>

来源

2016-09-28 13:17:56 slugo

你不应该在渲染方法中做到这一点。 – Maxx

也许你必须这样调用构造函数里面的超级。这是你的类

constructor(props) { super(props); }

内做出之后，您可能能够使用this.props.myProperty

希望工程

来源

2016-09-28 13:20:08 jprivillaso

所以我早些时候尝试过，并没有这样做。下面的问题之一虽然。感谢您的投入和时间！ – Peter3

随着es2016，你需要手动绑定this你的类的方法，如：

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

的形式

<form onSubmit={this.submitHandler.bind(this)}>

来源

2016-09-28 13:21:31

处理你忘了绑定组件的this到您的事件处理程序。有3种方式与ES6做到这一点：

//most effient way 
constructor(props){ 
super(props); 
this.submitHandler = this.submitHandler.bind(this); 
} 
OR 
submitHandler = (e) => {....} 
OR 
render(){ 
    ... 
     <form onSubmit={this.submitHandler.bind(this)}> 
    ... 

}

来源

2016-09-28 13:26:35

反应es5 vs es6

回答

相关问题