如何决定何时传递参数&当不 [英] How to decide when to pass parameter & when not

问题描述

谁能告诉我如何知道何时需要传递参数& ;?什么时候不?例如，下面的代码 click = {()=>this.deletePersonH​​andler(index)我没有传递任何参数&直接给index参数仍然可以使代码正常工作.另一方面， changed = {(event)=>this.nameChangedHandler(event，person.id)我必须传递事件参数以使代码正常工作.在这里，我变得困惑如何决定何时传递参数&.不用的时候.

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

推荐答案

诸如onClick，onChange之类的事件将通过事件"传递给用户.默认情况下，事件处理程序将使用参数(可以是事件，e或您为其指定的任何名称).

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.

您可以看到具有3种不同方案的示例

You can see an example with 3 different scenarios here

• 仅接收事件.无需通过它:

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

• 同时接收事件和自定义参数(在此示例中，id为状态)

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

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

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

这篇关于如何决定何时传递参数&当不的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！