Могу ли я отправить событие и параметр функции?

Question

Вот мой код:

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 param (hero_id и event) в 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>    
    ); 
    } 
} 

Answer 1

Это должно работать:

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

Answer 2

Вы можете сделать как onChange={ (event) => this.updateHeroName(‌​_hero.id, event) } (как Alexander T предложил)

Но в целом, это лучше не использовать функции навигации или bind методы внутри render, как он генерирует новая копия функции на любой вызов render. Переместить функцию объявления в class constructor.

Я лично предпочитаю использовать функции курсора в качестве свойств класса в этом случае

class MyClass extends React.Component { 

    handleClick =() => { 
    // your logic 
    }; 

    render() { 
    return (
     <button onClick={this.handleClick}>Click me</button> 
    ); 
    } 
} 

Это не является частью спецификации ES2015 но babel stage-0 preset поддерживает этот синтаксис

Вы можете прочитать больше о контексте привязки в Реагируй this article