在另一个选中的div复选框中加载-rectjs

Question

我有两个按钮，一个叫做"选择"；另一个被称为"；选择"；并且当我点击选择时；3div"；每一个都包含一个复选框，我需要的是，当我选择复选框时，它也显示为"中的div；选择"；当我点击选择按钮，尝试了几种方法，但无法使其工作时，发送了我的代码。

我需要的是：当选择我具有的3个检查中的任何一个时；选择"；div

import React,{useState} from 'react'
function Pruebas3() {
const [value2, setValue2] = useState("");
const handlerOnClick = (e) => {
setValue2(e.target.value)
}

return (
<div>
<div className="col-sm-6">
<div className="form-check">
<input type="button" name="boton1" value="seleccionar"         
onClick={handlerOnClick}
/> 

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
<input type="button" name="boton1" value="seleccionados"  onClick={handlerOnClick}
/> 
</div>
</div>
<div className="col-sm-7">
{value2 === "seleccionar" && (
<div className="card">
<div className="card-body">
<div name="check1" >Div1<input type="checkbox" name="check_1" /></div>
<div name="check2" >Div2<input type="checkbox" name="check_2"/></div>
<div name="check3" >Div3<input type="checkbox" name="check_3"/></div>
</div>
</div>
)}
</div>
<div className="col-sm-7">
{value2 === "seleccionados" && (
<div className="card">
<div className="card-body">
<h1>CHECK seleccionados</h1>
{
if(check_1 == true){
<div name="check1" >Div1<input type="checkbox" name="check_1" /></div>
}else if (check_2 == true){
<div name="check2" >Div2<input type="checkbox" name="check_2" /></div> 
}else if (check_3 == true){
<div name="check3" >Div3<input type="checkbox" name="check_3" /></div> 
}
}
</div>
</div>
)}
</div>
</div>
)
}
export default Pruebas3

Answer 1

使用受控输入获取复选框的状态。

const App = () => {
const [checked, setChecked] = useState(false);
const handleChange = () => setChecked(!checked)
// Now that you have to checked value you can do conditional rendering
return (
<input
type="checkbox"
checked={checked}
onChange={handleChange}
);
};