antd 切换检查属性答案

【问题标题】：antd Switch checked propertyantd 切换检查属性
【发布时间】：2020-09-30 14:33:53
【问题描述】：

我想从antd React UI 库中问一个关于 Swtich 组件的问题。

<Switch checked={true} />

当我设置检查属性时，我不再可以更改它！我查看了antd website 上的 API，但我不明白为什么它不起作用。

也请看my sample code here on codesandbox.io

【问题讨论】：

您无法更改它，因为您已将其永久设置为 true。

标签： reactjs antd

【解决方案1】：

这是因为组件被控制，并且值总是设置为true。

你可以在这里做两件事：

将checked 更新为defaultChecked
添加状态变量和onChange 事件。您还可以检查工作代码框：https://codesandbox.io/s/beautiful-archimedes-v26kq?file=/src/App.js:111-336

export default function App() {
  const [checked, setChecked] = React.useState(true);
  return (
    <div className="App" style={{ marginTop: 100 }}>
      <Switch checked={checked} onChange={setChecked} />
    </div>
  );
}

在此处阅读有关受控组件的更多信息：https://reactjs.org/docs/forms.html#controlled-components

【讨论】：

【解决方案2】：

import React, { useState } from "react";
import "./styles.css";
import "antd/dist/antd.css";
import { Switch } from "antd";

export default function App() {
  const [isStatus, setStatus] = useState(false);

  const buttonHandler = () => {
    setStatus((status) => !status);
  };

  return (
    <div className="App" style={{ marginTop: 100 }}>
      <Switch onChange={buttonHandler} checked={isStatus} />
    </div>
  );
}

【讨论】：

【解决方案3】：

这里是你可以处理它的方法

export default function App() {
  const [active, setActive] = useState(true);

  return (
    <div className="App" style={{ marginTop: 100 }}>
      <Switch onClick={() => setActive(!active)} checked={active} />
    </div>
  );
}

【讨论】：