React JS:在onClick事件中调用两个函数不会运行函数

Question

我正在使用React和React Spring。React spring有一个切换功能，可以在点击时最大化窗口。它看起来像这样：

class Projects extends Component {
constructor() {
super()
this.state = {
instructions: true,
data: ''
}
}
handleClick ()  {
console.log('hello world');
this.setState({
instructions: false
});
console.log(this.state.instructions);
return true;
}
render() {
return (
{this.state.instructions && (
<div className="projects-instructions">
Instructions here
</div>
)}
<Grid
className="projects"
data={data}
keys={d => d.name}
heights={d => d.height}
columns={2}>
{(data, maximized, toggle) => (
<div onClick={()=>{
return data.clicks ? toggle() : false
}}>
</div>
)}
</Grid>
);
}
}
export default Projects;

我想做的是在点击时隐藏说明。我可以通过调用handleClickvia来实现这一点，在我的onClick标签中调用this.handleClick.bind(this)via:onClick={this.handleClick.bind(this)}。但这意味着我必须删除toggle-onClick函数。所以我发现我可以调用两个这样的函数：

onClick={()=>{
this.handleClick.bind(this);
return data.clicks ? toggle() : false;
}}

问题是this.handleClick.bind(this)从不运行。console.log甚至不运行。

我该怎么做？

Answer 1

将this绑定到函数不会调用该函数。它只是指定this在该函数中使用时所指的内容。在构造函数中绑定到this，然后在onClick事件中，只需正常调用函数(即this.handleClick()(。

class Projects extends Component {
constructor() {
super();
this.state = {
instructions: true,
data: ''
}
//this is where you bind `this` to methods
this.handleClick = this.handleClick.bind(this);
}
handleClick ()  {
console.log('hello world');
this.setState({
instructions: false
});
console.log(this.state.instructions);
return true;
}
render() {
return (
{this.state.instructions && (
<div className="projects-instructions">
Instructions here
</div>
)}
<Grid
className="projects"
data={data}
keys={d => d.name}
heights={d => d.height}
columns={2}>
{(data, maximized, toggle) => (
<div onClick={()=>{
this.handleClick();
return data.clicks ? toggle() : false
}}>
</div>
)}
</Grid>
);
}
}
export default Projects;