在构造函数中进行React绑定,如何将参数传递给props

时间:2016-05-24 11:27:26

标签: javascript reactjs

我正在尝试将我的React类转换为ES6,但是我在这个过程中遇到了一些困难。我想在构造函数中创建绑定,而不是在渲染视图中。

现在,如果我有一个带有setState的根模块,需要一个参数,例如:

constructor() {
    super();

    this.state = {
        mood: ""
    };

    this.updateMood(value) = this.updateMood.bind(this,value);
}

updateMood(value) {
    this.setState({mood: value});
}

然后我将此函数传递给组件:

<customElement updateMood={this.updateMood}></customElement>

然后在customElement模块中,我有类似的东西:

constructor() {
    super();
}

update(e) {
    this.props.updateMood(e.target.value);
}

并在渲染中:

<input onChange={this.update} />

这是正确的方法吗?因为我不能让它起作用; - (

2 个答案:

答案 0 :(得分:7)

您不能使用此this.updateMood(value) = this.updateMood.bind(this,value);构造,因为它是语法错误。

您可以像这样解决问题

class CustomElement extends React.Component {
  constructor() {
    super();
    this.update = this.update.bind(this);
  }

  update(e) {
    this.props.updateMood(e.target.value);
  }

  render() {
    return <input onChange={this.update} />
  }
}

class Parent extends React.Component {
  constructor() {
    super();

    this.state = {
        mood: ""
    };

    this.updateMood = this.updateMood.bind(this);
  }

  updateMood(value) {
    this.setState({ mood: value });
  }

  render() {
    return <div>
      <CustomElement updateMood={this.updateMood}></CustomElement>
      <h1>{ this.state.mood }</h1>
    </div>
  }
}

Example

答案 1 :(得分:0)

或者,根据您的babel设置或使用打字稿,以下内容实现相同,但编写/维护更方便:

$(document).on("keyup", function(e) {
  if ($('#tbprofession').is(":focus")) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 9) {
      alert('I was tabbed!');
    } else {
      alert('not tabbed');
    }
  }
});