反应 es5 与 es6

Question

过去几周我一直在尝试使用 Redux 学习 React。我似乎无法将一个动作作为属性正确传递，因为当我运行它时我得到一个 "cannot read property "props" 为空。但是在网上找到一些代码我能够尝试它使用 es5 语法并且它有效。有没有人明白我在 es6 中做错了什么以及我如何让它工作？下面是我在 es6 上的尝试，它不适用于 es5 样式，注释掉哪些有效。

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 
}

Answer 1

我在这里为您准备了一个演示：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')
);

Answer 2

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

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

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

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

Answer 3

也许你必须像这样在构造函数中调用 super。这是在你的 class

中制作的

constructor(props) { super(props); }

之后您可能可以使用 this.props.myProperty

希望有用

Answer 4

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

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

表单上的处理程序

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

Answer 5

您忘记将组件的 this 绑定到您的事件处理程序。使用 ES6 有 3 种方法：

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

}

反应 es5 与 es6

React es5 vs es6

javascript

reactjs

redux

react-redux