reactjs - antd 切换勾选属性

Question

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

<Switch checked={true} />

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

请同时查看 my sample code here on 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