javascript - 在 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;

标签： javascriptreactjs

Answer 1

您可以简单地调用markComplete传递的道具而不使用.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>