Question

我是React的新手。任何人都可以向我解释问题是什么？似乎onClick函数从两个按钮继续触发，导致无限递归。

{{1}}

Answer 1

请参阅：

this.handleClick(0)将使用渲染进行触发，无需单击，因为您调用了该函数。

然后setState调用新渲染并再次调用handleClick

onClick={() => this.handleClick(1)}会帮助你。

Answer 2

您需要传递功能不要将其称为

        <div>
            <button onClick={() => this.handleClick(0)} >Button 0</button>
            <button onClick={() => this.handleClick(1)} >Button 1</button>
            <span>{this.state.selectedIndex}</span>
        </div>

其他解决方案是让你handleClick返回一个函数

handleClick(newIndex) {
    return () => this.setState({
        selectedIndex: newIndex
    });
}

render() {
    return (
        <div>
            <button onClick={this.handleClick(0)} >Button 0</button>
            <button onClick={this.handleClick(1)} >Button 1</button>
            <span>{this.state.selectedIndex}</span>
        </div>
    );
}

另外（一种更好的方法，因为它不会在每个渲染调用上创建新函数）可以保持按钮本身的值（是 - 是<button> has value）

handleClick(event) {
    this.setState({
        selectedIndex: +event.target.value
    });
}

render() {
    return (
        <div>
            <button value="0" onClick={this.handleClick} >Button 0</button>
            <button value="1" onClick={this.handleClick} >Button 1</button>
            <span>{this.state.selectedIndex}</span>
        </div>
    );
}

Answer 3

<button onClick={() => this.handleClick(0)}>Button 0</button>

JSX onClick继续评估，InternalError：太多的递归

3 个答案: