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)这样写，一开始看起来可能会更加清楚。

归结为事件处理程序的属性（onClick，onChange，...）应该具有在事件发生时可以调用的函数引用。

有关React Events行为的基本查询

1 个答案: