时间戳

首页 > 解决方案 > 如何决定何时传递参数以及何时不传递

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

问题描述

谁能告诉我我们如何知道何时需要传递参数以及何时不需要？例如，在下面的代码中click={() => this.deletePersonHandler(index)，我没有传递任何参数并直接给出 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;```

标签： javascriptreactjsparametersarguments

解决方案

无论你作为事件处理程序传递什么，都会被事件对象调用。想象以下情况：

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

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

    • onClick={() => noParams()}-> noParams()✅</p>

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

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

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

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

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

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

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

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

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

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

推荐阅读