在 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)}

因此，您創建了一個將調用您的函數的函數。 否則，您已經在調用該函數。

希望我說清楚了！ 這有點令人困惑