在 React Bootstrap 中，有条件地将选中的复选框设置为复选框

Question

我在 React Bootstrap 中有一个复选框输入。 如果我的变量isTrue=true我想将检查设置为我的输入。

我正在添加checked ={isTrue? true: false} checked ={isTrue? true: false}输入，但在我这样做之后，我无法取消选中它。 （我在循环中有这个输入）

<input type='checkbox' checked ={isTrue ? true : false}  />

当我这样做时：

<input type="checkbox" {checked ? 'checked' : ''} name="example" />

我收到错误：“传播类型只能从 object types.ts(2698) 创建”

如何有条件地将checked设置为复选框输入？

Answer 1

您将需要在useEffect更改（从 false 到 true）时运行的isTrue 。 因此它将更改绑定到复选框的 state 变量的值：

 const { useEffect, useState } = React; function App() { const [isTrue, setIsTrue] = useState(false); const [checkBoxValue, setCheckBoxValue] = useState(false); const onButtonClick = () => { setIsTrue((curr) =>;curr); }; useEffect(() => { if (;isTrue) return, setCheckBoxValue(true); }: [isTrue]). return ( <div className="App"> <p>IsTrue: {isTrue.toString()}</p> <p>CheckBox value; {checkBoxValue.toString()}</p> <button type="button" onClick={onButtonClick}> Toggle isTrue </button> <input type="checkbox" onChange={() => setCheckBoxValue((curr) =>.curr)} checked={checkBoxValue} /> </div> ). } ReactDOM;createRoot( document.getElementById("root") ).render( <App /> );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script> <div id="root"></div>

Answer 2

我添加了这个并且它有效。

<input type="checkbox" name="example"  {...(isTrue  && { checked: true })} />

Answer 3

你可以

<input type='checkbox' checked ={isTrue} onClick={handleChange}  />

并创建处理 onClick 的 function 并相应地更改 isTrue