在 React 中将组件道具传递给父组件时无法绑定事件

Question

我有这个代码（粘贴在下面），我试图将“id”绑定到 onChange 事件以将其传递给父组件。

问题： onChange={this.props.markComplete.bind(this, id)}返回错误： TypeError: Cannot read property 'bind' of undefined

而如果我将this.props.markComplete.bind(this, id)替换为this.markComplete.bind(this, id) ，则没有错误。 我有点迷失在我做错的地方。

注意：除了“绑定”之外，传递的道具按预期工作。

代码：

export class Tasks extends Component {
  getStyle = () => {
    return {
      textDecoration: this.props.todo.completed ? "line-through" : "none"
    };
  };

  render() {
    const { id, title } = this.props.todo;
    return (
      <div style={this.getStyle()}>
        <input
          type="checkbox"
          name="task"
          checked={this.props.todo.completed ? true : null}
          onChange={this.props.markComplete.bind(this, id)}
        />
        <label>{title}</label>
      </div>
    );
  }
}

export default Tasks;

Answer 1

你可以简单地调用markComplete通过 props 而没有.bind -ing：

 const { Component } = React, { render } = ReactDOM, rootNode = document.getElementById('root') const taskList = [ {id:0, title: 'Do something', completed: false}, {id:1, title: 'Do something else', completed: false}, {id:2, title: 'Do some other stuff', completed: true}, ] class Task extends Component { render() { const { id, title, completed } = this.props; return ( <div style={{backgroundColor:this.props.completed ? 'green' : 'none'}}> <input type="checkbox" name="task" checked={completed} onChange={() => this.props.markComplete(id)} /> <label>{title}</label> </div> ); } } class TaskBoard extends Component { constructor(props){ super(props) this.state = {tasks:this.props.tasks} this.handleComplete = this.handleComplete.bind(this) } handleComplete(taskId, completed){ const tasks = [...this.state.tasks], completedTask = tasks.find(({id}) => id == taskId) completedTask.completed = true this.setState({tasks}) } render(){ return( this.state.tasks.map(task => <Task {...{key:task.id, markComplete:this.handleComplete,...task}} />) ) } } render(<TaskBoard tasks={taskList} />, rootNode)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

Answer 2

你不能在这个地方绑定函数。

正如我从您的代码中所理解的，您有另一个组件，并且您将markComplete函数作为道具传递给Tasks组件，对吗？

你可能有这样的事情：

export class AnotherComponent extends Component {
  markComplete(id) {
    // doSomething
  }

  render() {
    <Tasks todo={someTodoObject} markComplete={this.markComplete} />
  }
}

你需要在这个父组件中绑定markComplete函数（或者使用箭头函数），例如：

export class AnotherComponent extends Component {
  // Example using bind
  constructor(props) {
    super(props)

    this.markComplete = this.markComplete.bind(this)
  }

  markComplete(id) {
    // doSomething
  }

  render() {
    <Tasks todo={someTodoObject} markComplete={this.markComplete} />
  }
}

或者

export class AnotherComponent extends Component {
  // Example using arrow function
  markComplete = (id) => {
    // doSomething
  }

  render() {
    <Tasks todo={someTodoObject} markComplete={this.markComplete} />
  }
}

通过这种方式，您可以将函数绑定到您所在状态的组件。

此外，在Tasks组件上（假设您不再在那里使用 .bind ），在您的情况下，您不能像这样使用onChange ：

onChange={this.props.markComplete(this, id)}

这将在渲染后立即调用markComplete函数。

如果您有一个函数需要在某个事件（单击、更改等）之后执行并且该函数接收一个参数，则您总是需要执行以下操作：

onChange={() => this.props.markComplete.bind(this, id)}

因此，您创建了一个将调用您的函数的函数。 否则，您已经在调用该函数。

希望我说清楚了！ 这有点令人困惑