Question

JSX

<a onClick={this.handleSave.bind(this)}/></a>

功能

handleSave(param){

}

如何将param从Jsx传递给handleSave函数？我没有将所有东西都置于状态。 a标签是另一个组件的子项。

Answer 1

根据你的函数名称，我假设你想根据事件传递一个参数，所以如果是这样你可以这样做：

<a onClick={(e) => this.handleSave(e.target.value) }/></a>

箭头函数保留this的上下文，因此您不必使用bind。

Answer 2

您可以在调用bind

时设置参数

class App extends Component {
  handleClick(name){
    alert(this.props.appName + " : " + name);
  }
  render() {
    return (
      <div className="App">
        <a onClick={this.handleClick.bind(this, this.props.appName)} >Click Here</a>
      </div>
    );
  }
}

Answer 3

在JSX元素上绑定函数不是一个好习惯，你应该在构造函数上绑定它们，这样就不会在每个渲染上生成一个函数：

class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this, this.props.appName);
  }
  handleClick(name){
    alert(this.props.appName + " : " + name);
  }
  render() {
    return (
      <div className="App">
        <a onClick={this.handleClick}>Click Here</a>
      </div>
    );
  }
}

当使用jsx中的构造函数绑定它时传递参数

3 个答案: