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个参数（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>             
     );
   }
 }

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

中的React中阅读有关上下文绑定的更多信息

我可以向函数发送事件和参数吗？

2 个答案: