如何通过更改状态使按钮在 React.js 中充当单选按钮？

Question

我对 React 还很陌生，想尝试制作一个寻路可视化工具。 我希望有可以单击的按钮，这将使特定的寻路算法处于活动状态，而其他所有算法都处于非活动状态，但我无法实现这一点。

我有一个呈现按钮的选项组件：

export class Options extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dijkstra: false,
            aStar: false,
            bestSearch: false,
            bfs: false,
            dfs: false,
        };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(name) {
        this.setState({
            dijkstra: false,
            aStar: false,
            bestSearch: false,
            bfs: false,
            dfs: false,
        });

        this.setState({ [name]: true });
    }

    render() {
        return (
            <div className='toolbar'>
                <div className='algorithms'>
                    <Button
                        name="Dijkstra's Algorithm"
                        type='dijkstra'
                        isActive={this.state.dijkstra}
                        onClick={this.handleClick}
                    />
                    <Button
                        name='A* Algorithm'
                        type='aStar'
                        isActive={this.state.aStar}
                        onClick={this.handleClick}
                    />
                    <Button
                        name='Best First Search'
                        type='bestSearch'
                        isActive={this.state.bestSearch}
                        onClick={this.handleClick}
                    />
                    <Button
                        name='BFS'
                        type='bfs'
                        isActive={this.state.bfs}
                        onClick={this.handleClick}
                    />
                    <Button
                        name='DFS'
                        type='dfs'
                        isActive={this.state.dfs}
                        onClick={this.handleClick}
                    />
                </div>
                <div className='info'></div>
                <div className='legend'></div>
            </div>
        );
    }
}

state 用于跟踪哪个算法处于活动状态，而 handleClick 根据按钮的键更改 state。 以下是 Button 组件的代码：

export class Button extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isActive: false,
        };
    }

    componentWillReceiveProps() {
        if (this.props.isActive) this.setState({ isActive: true });
    }

    render() {
        let active = "";
        if (this.state.isActive) {
            active = "active";
        }
        return (
            <button
                className={`button ${active}`}
                onClick={this.props.onClick(this.props.type)}
            >
                {this.props.name}
            </button>
        );
    }
}

我收到错误消息“超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制嵌套更新的数量以防止无限循环。”

有什么帮助我可以纠正这个或更好的方法来实现这个吗？

Answer 1

当你这样做时：

<button
    className={`button ${active}`}
    onClick={this.props.onClick(this.props.type)}
>

它将onClick设置为this.props.onClick(this.props.type)返回的任何内容。 所以每次渲染时，它都会调用this.props.onClick ，这会调用setState ，这会导致重新渲染，它会再次调用它，等等。

你可能想做：

onClick={() => this.props.onClick(this.props.type)}