javascript - 如何决定何时传递参数和何时不传递

Question

谁能告诉我我们怎么知道什么时候需要传递参数，什么时候不需要？例如在下面的代码 click={() => this.deletePersonHandler(index)我没有传递任何参数 & 直接给索引参数仍然代码正在工作。另一方面changed={(event) => this.nameChangedHandler(event, person.id)我必须传递事件参数才能使代码工作。在这里，我对如何决定何时传递参数和何时不传递感到困惑。

import './App.css';
import Person from './Person/Person';

class App extends React.Component {
  state = {
    persons: [
     { id: 'user1', name: 'Royal1', age: 20},
     { id: 'user2', name: 'Royal2', age: 21},
     { id: 'user3', name: 'Royal3', age: 23}
    ],
    other: 'some other value',
    showPersons: false
  }

  nameChangedHandler = (event, id) => {
    const personIndex = this.state.persons.findIndex(p => {
      return p.id === id;
    })

    const person = {
      ...this.state.persons[personIndex]
    }
   person.name = event.target.value
   const persons = [...this.state.persons]
   persons[personIndex] = person

    this.setState({ persons: persons})
  }

  deletePersonHandler = (personIndex) => {
    const persons = [...this.state.persons];
    persons.splice(personIndex, 1);
    this.setState({persons: persons})
  }


  togglePersonsHandler = () => {
      const doesShow = this.state.showPersons;
      this.setState({showPersons: !doesShow});
  }

  render() {
    const style = {
      backgroundColor: 'pink',
      font: 'inherit',
      border: '1px solid blue',
      cursor: 'pointer'
    }

    let persons = null;

    if (this.state.showPersons) {
      persons = <div>
      {this.state.persons.map((person, index) => {
        return <Person
        click={() => this.deletePersonHandler(index)}
        name={person.name}
        age={person.age}
        key={person.id}
        changed={(event) => this.nameChangedHandler(event, person.id)} />
      })}
      </div>
    }
  return (
    <div className="App">
      <h1>Hi I am React App</h1>
      <p>This is really working!</p>
      <button style={style} onClick={this.togglePersonsHandler}>Switch Name</button>
      {persons}
    </div>
  );
}
}

export default App;```

Answer 1

像 onClick、onChange 和其他事件这样的事件会默认将“事件”参数(可以是 event、e 或您给它的任何名称)传递给您的事件处理程序。
问题是，如果您也想传递自定义参数，处理程序将接收它们，但此默认事件将无法访问，除非您也传递它。
您可以看到一个包含 3 个不同场景的示例 here

只接收事件。无需通过:

onClick={() => this.nameChangedHandler()} />

接收事件和自定义参数(id 在本例中为 state)

onClick={(event) => this.nameChangedHandler(event, id)} />

仅传递自定义参数，但不接收事件

onClick={() => this.nameChangedHandler(id)} />