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

问题描述

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

import './App.css';从'./Person/Person'导入人；类 App 扩展了 React.Component {状态 = {人: [{ id: 'user1', name: 'Royal1', 年龄: 20},{ id: 'user2', name: 'Royal2', 年龄: 21},{ id:'user3'，姓名:'Royal3'，年龄:23​​}],其他:'其他一些价值'，表演者:假}nameChangedHandler = (event, id) =>{const personIndex = this.state.persons.findIndex(p => {返回 p.id === id;})常量人 = {...this.state.persons[personIndex]}person.name = event.target.valueconst 人 = [...this.state.persons]人[人索引] = 人this.setState({人:人})}deletePersonH​​andler = (personIndex) =>{const 人 = [...this.state.persons];people.splice(personIndex, 1);this.setState({人:人})}togglePersonsHandler = () =>{const doShow = this.state.showPersons;this.setState({showPersons: !doesShow});}使成为() {常量样式 = {背景颜色:'粉红色'，字体:'继承'，边框:'1px纯蓝色'，光标:'指针'}让人 = 空；如果(this.state.showPersons){人 = 
{this.state.persons.map((person, index) => {返回<人点击={() =>this.deletePersonH​​andler(index)}姓名={人名}年龄={人.年龄}键={person.id}改变={(事件)=>this.nameChangedHandler(event, person.id)}/>})}
}返回 (
<h1>我是 React App</h1><p>这真的很管用！</p><button style={style} onClick={this.togglePersonsHandler}>开关名称</button>{人}
);}}导出默认应用程序;```

解决方案

onClick、onChange 等事件会传递一个事件"参数(可以是 event、e 或您给它的任何名称)默认为您的事件处理程序.

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

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

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

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

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

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

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

onClick={() =>this.nameChangedHandler(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;```

解决方案

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

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