时间戳

首页 > 解决方案 > antd 切换检查属性

reactjs - antd 切换检查属性

问题描述

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

<Switch checked={true} />

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

还请在codesandbox.io上查看我的示例代码

标签： reactjsantd

解决方案

这是因为组件是受控的，并且值始终设置为true。

你可以在这里做两件事：

  1. 更新checked到defaultChecked
  2. 添加状态变量和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

推荐阅读