react antd｜使用switch更改用户列表中每个用户的状态

最新推荐文章于 2025-05-02 23:20:02 发布

黛玉戴玉逮鱼

最新推荐文章于 2025-05-02 23:20:02 发布

阅读量349

点赞数

分类专栏： React 文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/weixin_44730335/article/details/129426455

版权

React 专栏收录该内容

19 篇文章

订阅专栏

文章讲述了在处理用户状态时，如何正确使用React组件中的onChange事件来获取和更新用户的状态。错误的尝试是通过onClick和onChange分别获取数据，导致数据同步问题。正确的解决方案是只使用onChange事件，并通过箭头函数传递record和checked状态，然后在对应的处理函数中进行get请求来更新用户状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

1. 获取每个用户的id

2. 获取每个用户的checked开关状态

3. 根据id checked发get请求更改用户状态

error

错误思路：

通过onChange获取checked，这个不需要参数，默认可获得

通过onClick获取这个用户的数据record，通过record.id获取id

在其中一个方法中get请求

结果：无法获取第一次更改状态的id和checked

原因：onClick是点击执行，onChange是变化执行。在其中一个函数内部获取另一个函数保存的数据时，获取不到，null。

success

正确思路：

只用onChange，通过箭头函数，传递record和checked。

在columns配置中注册：

onChange={(checked) => this.userStatus(record, checked)}

调用：

userStatus = (record, checked) => {};

  userStatus = (record, checked) => {
    // get请求
  };


    {
      title: "状态",
      dataIndex: "status",
      render: (_, record, status) => (
        <span>
          <Switch
            defaultChecked={status == 0 ? true : false}
            onChange={(checked) => this.userStatus(record, checked)}
          />
        </span>
      ),
    },