关于 React Events 行为的基本查询

Question

我是 React 新手。在关注 CS50 youtube tutorial 时，我关注了他们并使用 create-react-app 创建了一个示例待办事项列表项目。我只对 App.js 文件进行了更改，如下所示：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      currentTodo: ''
    };
  }

  onInputChange = e => {
    this.setState({currentTodo: e.target.value})
  }

  addTodo = () => {
    let todosCopy = this.state.todos.slice();
    todosCopy.push(this.state.currentTodo);
    this.setState({
      todos: todosCopy,
      currentTodo: ''
    })
  }

  deleteTodo = (i) => {
    let todosCopy = this.state.todos.slice();
    todosCopy.splice(i, 1);
    this.setState({
      todos: todosCopy
    })
  }


  render() {
    let todosList = this.state.todos.map((todo, i) => {
      return (
        <li key={i}>{todo}<button onClick={() =>this.deleteTodo(i)}>x</button></li>
      );
    });
    return (
      <div>
        <input value={this.state.currentTodo} onChange={this.onInputChange}/><button onClick={this.addTodo}>Add Todo</button>
        {this.state.todos.length === 0 ? <p>No todos</p> : <ul>{todosList}</ul>}
      </div>
    );
  }
}

export default App;

我的查询是，对于添加待办事项，onClick 被称为 this.addTodo，例如：

<button onClick={this.addTodo}>Add Todo</button>

它可以工作，但是为了删除待办事项，为什么我们必须这样写：

<button onClick={() =>this.deleteTodo(i)}>x</button>

为什么不能像下面这样写类似 addTodo 并传递给 i 的引用？

<button onClick={this.deleteTodo(i)}>x</button>

Answer 1

写this.deleteTodo(i)就是调用函数。你最终给 onClick 的是从 this.deleteTodo(i) 返回的，在这种情况下是 undefined.

() => this.deleteTodo(i) 正在创建一个新函数。如果你把它写成 function () { this.deleteTodo(i) }.bind(this) 作为练习，一开始看起来可能会更清楚一些。

归结为事件处理程序 props (onClick, onChange, ...) 应该被赋予一个函数引用，它可以在事件发生时调用。

关于 React Events 行为的基本查询

Basic query regarding React Events behavior

javascript

reactjs

create-react-app