Question

我只是在学习。我的改变＆＃39;将代码从ES5转换为ES6时，下拉菜单的事件不起作用，我不知道问题出在哪里。我已经查看了＃34;可能有你答案的问题＆＃34;，但没有。我的应用程序编译，但控制台有错误。我的怀疑是＆＃39; onChange＆＃39;选择＆＃39;中的属性Child.js的标签。我很感激提供的任何帮助。这是我的代码：

的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;

如果this，this.props.onChange(name);行无法访问

handleChange。因此，使函数成为es6胖箭头函数。

Answer 3

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

构造函数内部：

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

装饰器（例如：link）：

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

类装饰器（例如：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

的index.html

index.js

Parent.js

Child.js

Sibling.js

控制台

3 个答案: