在 jsx 中使用将 this 与构造函数绑定时传递参数答案

【问题标题】：Pass param when using bind this with constructor in jsx在 jsx 中使用将 this 与构造函数绑定时传递参数
【发布时间】：2017-06-30 07:19:03
【问题描述】：

JSX

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

功能

handleSave(param){

}

如何将参数从 Jsx 传递给我的 handleSave 函数？我没有将所有内容都设置为状态。 a 标签是另一个组件的子组件。

【问题讨论】：

使用this.handleSave.bind(this, param) 或者如果你想你可以使用ES6箭头函数。 onClick={() => handleSave(param)} 参见this 关于如何使用箭头函数的回答。
React js onClick can't pass value to method的可能重复

标签： javascript reactjs

【解决方案1】：

根据您的函数名称，我假设您希望根据事件传递参数，所以如果是这种情况，您可以这样做：

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

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

【讨论】：

你没有绑定这个，因为你使用了箭头功能。在我的情况下使用 bind this 没有错。
这就是为什么我说“我想你想根据事件传递一个参数”。如果您分享了有关您希望传递的参数的更多信息，那么答案会更中肯。

【解决方案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>
    );
  }
}

【讨论】：

【解决方案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>
    );
  }
}

【讨论】：

【解决方案4】：

class App extends Component {
    handleSave(param){
        // doing what you need with your (param)
    }
    render() {
        return (
            <div className="App">
                <a onClick={this.handleSave.bind(this, param)} >Click Here</a>
            </div>
        );
    }
}

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。