在 es6 中使用 onChange

Question

我正在学习。将代码从 ES5 转换为 ES6 时，下拉菜单的 'onChange' 事件不起作用，我看不出问题出在哪里。我已经查看了 "Questions That May Have Your Answer"，但那里什么也没有。我的应用程序可以编译，但控制台出现错误。我怀疑是 Child.js 的 'select' 标签中的 'onChange' 属性。如果能提供任何帮助，我将不胜感激。这是我的代码：

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

Parent.js

import React from 'react';
import Child from './Child';
import Sibling from './Sibling';

class Parent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: 'Frarthur'};
    this.changeName = this.changeName.bind(this);
  }

  changeName(newName) {
    this.setState({name: newName});
  }

  render() {
    return (
      <div>
        <Child onChange={this.changeName} />
        <Sibling name={this.state.name} />
      </div>
    );
  }
}

export default Parent;

Child.js

import React from 'react';

class Child extends React.Component {

  handleChange(e){
    let name = e.target.value;
    this.props.onChange(name);
  }

  render(){
    return (
      <div>
        <select
          id="great-names"
          onChange={() => this.handleChange()}>

          <option value="Frarthur">Frarthur</option>
          <option value="Gromulus">Gromulus</option>
          <option value="Thinkpiece">Thinkpiece</option>

        </select>
      </div>
    );
  }
}

export default Child;

Sibling.js

import React from 'react';

class Sibling extends React.Component {

  render(){
    let name = this.props.name;

    return (
      <div>
        <h1>Hey, my name is {name}!</h1>
        <h2>Don't you think {name} is the prettiest name ever?</h2>
        <h2>Sure am glad my parents picked {name}!</h2>
      </div>
    );
  }
}

export default Sibling;

控制台

Uncaught TypeError: Cannot read property 'indexOf' of null
    at content.js:4186
Child.js:6Uncaught TypeError: Cannot read property 'target' of undefined
    at Child.handleChange (http://localhost:3000/static/js/bundle.js:32622:20)
    at onChange (http://localhost:3000/static/js/bundle.js:32644:30)
    at Object.executeOnChange (http://localhost:3000/static/js/bundle.js:24438:35)
    at ReactDOMComponent._handleChange (http://localhost:3000/static/js/bundle.js:24795:39)
    at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16910:17)
    at executeDispatch (http://localhost:3000/static/js/bundle.js:16692:22)
    at Object.executeDispatchesInOrder (http://localhost:3000/static/js/bundle.js:16715:6)
    at executeDispatchesAndRelease (http://localhost:3000/static/js/bundle.js:16103:23)
    at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/bundle.js:16114:11)
    at Array.forEach (native)
Child.js:6Uncaught TypeError: Cannot read property 'target' of undefined
    at Child.handleChange (http://localhost:3000/static/js/bundle.js:32622:20)
    at onChange (http://localhost:3000/static/js/bundle.js:32644:30)
    at Object.executeOnChange (http://localhost:3000/static/js/bundle.js:24438:35)
    at ReactDOMComponent._handleChange (http://localhost:3000/static/js/bundle.js:24795:39)
    at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16910:17)
    at executeDispatch (http://localhost:3000/static/js/bundle.js:16692:22)
    at Object.executeDispatchesInOrder (http://localhost:3000/static/js/bundle.js:16715:6)
    at executeDispatchesAndRelease (http://localhost:3000/static/js/bundle.js:16103:23)
    at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/bundle.js:16114:11)
    at Array.forEach (native)

Answer 1

您忘记将 event 传递给 handleChange 函数，请使用：

onChange={(e) => this.handleChange(e)}

或者这个：

onChange={this.handleChange.bind(this)}

Answer 2

像这样更改您的 Child 组件

import React from 'react';

class Child extends React.Component {

  handleChange = (e) => {
    let name = e.target.value;
    this.props.onChange(name);
  }

  render(){
    return (
      <div>
        <select
          id="great-names"
          onChange={this.handleChange}>

          <option value="Frarthur">Frarthur</option>
          <option value="Gromulus">Gromulus</option>
          <option value="Thinkpiece">Thinkpiece</option>

        </select>
      </div>
    );
  }
}

export default Child;

如果您的 handleChange，

this 无法访问 this.props.onChange(name); 行。因此，将函数设为 es6 粗箭头函数。

Answer 3

有很多方法可以很好地绑定您的方法。

构造函数内部：

constructor() {
    this.addTask = this.addTask.bind(this)
    this.completeTask = this.completeTask.bind(this)
}

装饰器（例如：link）：

@autobind
addTask(task) {
    /* ... */
    this.setState({ task });
}

class装饰器（例如：link：

import autobind from 'class-autobind';
class MyComponent extends React.Component {
    constructor() {
        autobind(this);
    }
    addTask(task) {
        /* ... */
        this.setState({ task });
    }
}

正如我之前的人所说：

addTask = (task) => {
    /* ... */
    this.setState({ task })
}

希望对某些人有所帮助。确保在使用它们时绑定方法，例如在输入事件中。

在 es6 中使用 onChange

using onChange with es6

javascript

onchange

reactjs

index.html

index.js

Parent.js

Child.js

Sibling.js

控制台