当我需要传递参数时，JSX Props中没有.bind（）或Arrow函数对我来说毫无意义 [英] No .bind() or Arrow Functions in JSX Props making no sense to me when I need to pass arguments

问题描述

看看eslint规则， JSX道具中没有.bind（）或箭头函数。

它说不要使用箭头函数或绑定：

 < div onClick = {this._handleClick.bind（this）}>< / div> 
< div onClick = {（）=> console.log（'Hello！'））}>< / div> 
  

而是使用：

 < div onClick = {this._handleClick}>< / div> 
  

这一切都很好，但是如何在click事件上将参数传递给该函数呢？ / p>

这是我的幼稚代码示例：

  export class UserList扩展了组件{
构造函数（props）{
超级构成（props）; 
 this.handleToggleActive = this.handleToggleActive.bind（this）; 
} 
 handleToggleActive（）{
 console.log（arguments）; 
} 
 render（）{
 return（
< ul className = user-list> 
 {this 
 .props 
 .users 
 .map（user =>（
< li key = {user.id}> 
< Link ==``/ users / $ {user.id }`}> {user.name}< / Link> 
< Button onClick = {this.handleToggleActive}>切换Active< / Button> 
< / li> 
 ））} 
< / ul> 
）； 
} 
} 
  

如何获取 user.id 到我的 handleToggleActive 函数？当我尝试类似以下操作时：

 < Button onClick = {this.handleToggleActive（user.id）}>切换活动< / Button> 
  

它在渲染时执行，而我看到的唯一的其他方法是使用箭头功能？

执行此操作的正确方法是什么？

解决方案

使用bind和arrow函数，都会创建一个新函数，将一个全新的prop传递给您的组件，从而导致不必要的重新渲染和垃圾收集器的额外工作，使用data-attributes是一个糟糕的设计，而不是React的工作方式事情，您不应直接访问DOM，而应让React处理事情。取而代之的是，您可以制作一个新组件并将处理程序作为道具传递，在该组件的方法中处理id的绑定：

  class用户扩展组件{
 handleClick（）{
 this.props.handleToggleActive（this.props.user.id）; 
} 
 
 render（）{
 return（
< li> 
< Link ==``/ users / $ {this.props .user.id}`}> {this.props.user.name}< / Link> 
< Button onClick = {this.handleClick}>切换活动状态< / Button> 
< ; / li> 
）
} 
} 
 
导出类UserList扩展了组件{
构造函数（props）{
超级（props） ; 
 this.handleToggleActive = this.handleToggleActive.bind（this）; 
} 
 handleToggleActive（userId）{
 console.log（userId）; 
} 
 render（）{
 return（
< ul className = user-list> 
 {this 
 .props 
 .users 
 .map（user =>（
<用户密钥= {user.id} user = {user} handleToggleActive = {this.handleToggleActive} /> 
）） } 
< / ul> 
）； 
} 
} 
  

Having a look at the eslint rule, No .bind() or Arrow Functions in JSX Props.

It says not to use, arrow functions or bind:

<div onClick={this._handleClick.bind(this)}></div>
<div onClick={() => console.log('Hello!'))}></div>

But rather use:

<div onClick={this._handleClick}></div>

This is all well and good but how do I pass arguments to this function on the click event?

Here is my naive code example:

export class UserList extends Component {
  constructor(props) {
    super(props);
    this.handleToggleActive = this.handleToggleActive.bind(this);
  }
  handleToggleActive() {
    console.log(arguments);
  }
  render() {
    return (
      <ul className="user-list">
        {this
          .props
          .users
          .map(user => (
            <li key={user.id}>
              <Link to={`/users/${user.id}`}>{user.name}</Link>
              <Button onClick={this.handleToggleActive}>Toggle Active</Button>
            </li>
          ))}
      </ul>
    );
  }
}

How do I get the user.id to my handleToggleActive function? when I try something like:

<Button onClick={this.handleToggleActive(user.id)}>Toggle Active</Button>

It is executed when rendering, and the only other way I can see to do it is to use an arrow function?

What is the correct way to do this?

解决方案

Either using bind and arrow functions, will create a new function passing a completely new prop to your component, causing unnecessary rerenders and extra work for the garbage collector, using data-attributes is a bad design and is not the React way of doing things, you should not access the DOM directly, but rather let React handle things. Instead of that you can just make a new component and pass the the handler as a prop, handling the "binding" of the id in a method of the component:

class User extends Component {
  handleClick() {
    this.props.handleToggleActive(this.props.user.id);
  }

  render() {
    return (
       <li>
         <Link to={`/users/${this.props.user.id}`}>{this.props.user.name}</Link>
         <Button onClick={this.handleClick}>Toggle Active</Button>
      </li>
    )
  } 
}

export class UserList extends Component {
  constructor(props) {
    super(props);
    this.handleToggleActive = this.handleToggleActive.bind(this);
  }
  handleToggleActive(userId) {
    console.log(userId);
  }
  render() {
    return (
      <ul className="user-list">
        {this
          .props
          .users
          .map(user => (
            <User key={user.id} user={user} handleToggleActive={this.handleToggleActive} />
          ))}
      </ul>
    );
  }
}

这篇关于当我需要传递参数时，JSX Props中没有.bind（）或Arrow函数对我来说毫无意义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！