How to decide when to pass parameter & when not

问题

Can anyone tell me how do we know when we need to pass the parameter & when not? For example in below code click={() => this.deletePersonHandler(index) I am not passing any parameter & directly giving the index argument still the code is working. On the other hand changed={(event) => this.nameChangedHandler(event, person.id) I have to pass event parameter to make the code work. Here I am getting confuse how to decide when to pass parameter & when not.

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;```

回答1:

Events like onClick, onChange and others will pass an "event" parameter (could be event, e, or whatever name you give to it) by default to your event handler.

The thing is, if you want to pass custom parameters too, the handler will receive them but this default event won't be accesible, unless you pass it too.

You can see an example with 3 different scenarios here

• Receive only the event. No need to pass it:

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

• Receive both the event, plus custom parameters (id is state in this example)

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

• Pass only a custom parameter, but don't receive event

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

回答2:

Whatever you pass as the event handler is going to get called with the event object. Imagine the following cases:

• const noParams = () => { ... };

  • onClick={noParams} -> noParams(event) ✅

  • onClick={() => noParams()} -> noParams() ✅

• const nonEventParams = (thing) => { ... };

  • onClick={noParams} -> nonEventParams(event) ❌

  • onClick={() => nonEventParams(thing)} -> nonEventParams(thing) ✅

• const usesEvent = (event) => { ... };

  • onClick={usesEvent} -> usesEvent(event) ✅

  • onClick={(event) => usesEvent(event)} -> usesEvent(event) ✅

• const mixedParams = (event, thing) => { ... }

  • onClick={mixedParams} -> mixedParams(event) ❌

  • onClick={(event) => mixedParams(event, thing)} -> mixedParams(event, thing) ✅

If your callback requires nothing, or only the event, you can pass it directly. In all other cases you need to pass a function that proxies the event and any other parameters to your callback.

回答3:

This depends on the function you will be calling and what parameters its expecting.

Assume we have the following code

const doSomething = () => {}
const doSomethingBasedOnEvent = (event, otherParam) => {
 // do something with event and otherParam
}
const doSomethingBasedOnCustomParams = (param1, param2) => {}
const doSomethingJustWithEvent = event

// native event handlers (event handlers that are attached to dom elements) always pass an event parameter to the event listener
// here the event parameter will be passed directly to doSomethingJustWithEvent
<button onClick={doSomethingJustWithEvent} />

// if you want to pass other params
<button onClick={() => doSomethingBasedOnEvent(event, otherParam)} />
// A custom component callback might pass some custome events
<CustomComponent onSomeCustomEvent={(param1, param2, param3) => doSomethingBasedOnCustomParams(param1, param2)} />

// if your function does not need any parameters or just takes the exact same parameters as the handler you can pass it directly 
<CustomComponent onSomeCustomEvent={doSomething} />

The bottom line it just depends upon the function you need to call and whats the parameters it does need

来源：https://stackoverflow.com/questions/63632290/how-to-decide-when-to-pass-parameter-when-not