Question

在过去的几周里，我一直在努力学习与Redux的React。我似乎无法正确传递作为属性的动作，因为当我运行它时，我得到一个“无法读取属性”道具“null。但是在线找到一些代码我能够使用es5语法尝试它并且它工作了有没有人理解我在es6中做错了什么以及如何使它工作？下面是我对es6的尝试，这与es5风格的注释无效。

.transition()...attr()

Answer 1

我已经为您准备了一个演示：http://codepen.io/PiotrBerebecki/pen/dpRdKP

没有自动绑定ES6 classess所以您的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')
);

Answer 2

您忘记将组件的this绑定到事件处理程序。有三种方法可以使用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)}>
    ...

}

Answer 3

在React中使用es2015类时，需要手动将this绑定到类方法。您可以在构造函数（recommended）中执行此操作：

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

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

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

Answer 4

也许你必须像这样调用构造函数中的 super 。这是在你的课堂内进行的

constructor(props) { super(props); }

之后你可以使用 this.props.myProperty

希望它有效

Answer 5

使用es2016，您需要手动将this绑定到类方法，如：

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

表单上的处理程序

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

反应es5 vs es6

5 个答案: