antd 切换选中属性

Question

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

<Switch checked={true} />

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

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

Answer 1

这是因为该组件是受控的，并且该值始终设置为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