我可以发送事件和参数到一个函数

Can I send event and a param to a function?

本文关键字：一个 函数 事件 参数 我可以      更新时间：2023-09-26

下面是我的代码:

export default class HeroDetail extends Component {
constructor(props) {
   super(props);
 }
 updateHeroName(event) {
     this.props.actions.changeName(this.props.heroAppState.selectedHero.id, event.target.value);
 }
 render() {
   const _hero = this.props.heroAppState.selectedHero;
     return (
           <div>
             <input placeholder="name"
               value={_hero.name}
               onChange={this.updateHeroName.bind(this)} />
            </div>             
     );
   }
 }

我想在顶部绑定updateHeroName。并通过2参数(hero_id和事件)进入updateHeroName，但我不知道如何传递事件和一个名为_hero.id的参数，所以代码不工作。我可以在javascript中做到这一点吗?

// Fail code 
export default class HeroDetail extends Component {
constructor(props) {
   super(props);
   this.updateHeroName = this.updateHeroName.bind(this);
 }
 updateHeroName(hero_id, event) {
     this.props.actions.changeName(hero_id, event.target.value);
 }
 render() {
   const _hero = this.props.heroAppState.selectedHero;
     return (
           <div>
             <input placeholder="name"
               value={_hero.name}
               onChange={this.updateHeroName(_hero.id, event)} />
            </div>             
     );
   }
 }

应该可以:

export default class HeroDetail extends Component {
constructor(props) {
   super(props);
   this.updateHeroName = this.updateHeroName.bind(this);
 }
 updateHeroName(hero_id, event) {
     this.props.actions.changeName(hero_id, event.target.value);
 }
 render() {
   const _hero = this.props.heroAppState.selectedHero;
     return (
           <div>
             <input placeholder="name"
               value={_hero.name}
               onChange={(event) => this.updateHeroName(_hero.id, event)} />
            </div>             
     );
   }
 }

您可以像onChange={ (event) => this.updateHeroName(‌​_hero.id, event) } (Alexander T建议)那样做

但一般来说，最好不要在render中使用箭头函数或bind方法，因为它会在任何render调用时生成函数的新副本。将函数声明移到class constructor .

在这种情况下，我个人更喜欢使用箭头函数作为类属性

class MyClass extends React.Component {
  handleClick = () => {
    // your logic
  };
  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

这不是ES2015规范的一部分，但是babel stage-0预置支持此语法

你可以在这篇文章中了解更多React中的上下文绑定

相关文章：