onClick 功能无需单击即可工作[重复]

Question

我的 ReactJS 代码出现问题导致我无法理解的 onClick 错误。

<button onClick={this.apiGetProductPicture(this.props.categorie)}>{this.props.name}</button>

如果我这样写（没有参数也可以）

<button onClick={this.apiGetProductPicture()}>{this.props.name}</button>

但是有了参数，这个功能在我加载页面不需要点击的时候就可以工作了……

我如何给出参数的示例。

<ProductItem name={"Boulangerie"} categorie={0} />

我已经搜索过，但不明白为什么函数未经许可启动。

功能：

    apiGetProductPicture(i) {
    console.log('apiGetProductPicture');
    var json = myApiGet('https://******')
        // TODO do something with the data
        .then(json => this.setState({ pictures: json.content.categories[1].background }))

        .catch(error => console.log('home2', error));
}

Answer 1

你必须在onClick上给出一个函数的引用：

所以你必须写类似的东西：

apiGetProductPicture= (i) => () => {
    i = 0;
    console.log('apiGetProductPicture');
    var json = myApiGet('https://******')
        // TODO do something with the data
        .then(json => this.setState({ pictures: json.content.categories[1].background }))

        .catch(error => console.log('home2', error));
}