如何决定何时传递参数，何时不传递

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

无论您作为事件处理程序传递什么，都将使用事件对象进行调用。想象一下以下情况：

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) ✅

如果你的回调不需要任何东西，或者只事件，你可以直接传递它。在所有其他情况下，您需要将代理事件和任何其他参数的函数传递给您的回调。

Answer 2

这取决于您要调用的函数及其期望的参数。

假设我们有以下代码

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} />

最重要的是它只取决于你需要调用的函数以及它需要的参数是什么

Answer 3

默认情况下，onClick、onChange 和其他事件会将“事件”参数（可以是 event、e 或您为其指定的任何名称）传递给您的事件处理程序。

问题是，如果您也想传递自定义参数，处理程序将接收它们，但此默认事件将不可访问，除非您也传递它。

您可以看到一个包含 3 种不同场景的示例 here

只接收事件。不用传：

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

同时接收事件和自定义参数（本例中id为state）

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

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

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

如何决定何时传递参数，何时不传递

How to decide when to pass parameter & when not

javascript

parameters

arguments

reactjs