React 中setState({key:value}) key值动态变化，如何动态设置key的值。

最新推荐文章于 2023-12-03 16:21:31 发布

原创最新推荐文章于 2023-12-03 16:21:31 发布 · 7.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#React #setState #key

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

React

1 篇文章

订阅专栏

本文介绍了一种在React中使用setState的高效方法，通过动态键名更新状态，避免了硬编码并提高了代码的可维护性。

部署运行你感兴趣的模型镜像


state = {
    visible1: false,
    visible2: false,
    visible3: false
}

onShow = (key) => {
    this.setState({
        key: true
    });
}

render(){
    return (
        <button onClick={this.onShow.bind(this,'visible1')}>按钮1</button>
        <button onClick={this.onShow.bind(this,'visible2')}>按钮2</button>
        <button onClick={this.onShow.bind(this,'visible3')}>按钮3</button>
    );
}

显然这样 key:value 动态赋值并不会成功。根据key动态赋值只需要这样就可以成功了

onShow = (key) => {
    this.setState({
        [key]: true
    });
}

您可能感兴趣的与本文相关的镜像

AutoGPT

AI应用

AutoGPT于2023年3月30日由游戏公司Significant Gravitas Ltd.的创始人Toran Bruce Richards发布,AutoGPT是一个AI agent（智能体），也是开源的应用程序，结合了GPT-4和GPT-3.5技术，给定自然语言的目标，它将尝试通过将其分解成子任务，并在自动循环中使用互联网和其他工具来实现这一目标