我在表中有数据，我想编辑数据，当我单击编辑按钮时，我得到单行数据，但在这里我无法在表单中绑定这些值......我能够绑定所有文本框值，但无法绑定复选框和单选按钮值.. 任何人都可以帮助我如何以复选框和单选按钮的形式获取选定的单个产品值.. 提前致谢...
这是我的更新产品代码
const UpdateProduct = () => {
let dispatch = useDispatch();
let history = useHistory();
let id =useParams().id;
const [checkBoxes, setcheckBoxes] = useState([
{name:"Vegetables",isChecked:false},
{name:"Fruits",isChecked:false},
{name:"Veg & Fruits",isChecked:false},
{name:"Only-Veg",isChecked:false},
{name:"Only-Fruits",isChecked:false}
])
const [radio, setradio] = useState([
{name:"Juice",isChecked:false},
{name:"Curry",isChecked:false}
])
let gettingSingleData = useSelector((state)=>{
return state.FetchALLProducts;
})
useEffect(() => {
dispatch(allActions.singleProduct(id))
}, [id])
const updateInput=()=>{
}
// updateImage
let updateImage = async (event) => {
let imageFile = event.target.files[0];
let base64Image = await convertBase64String(imageFile);
dispatch(updateInput(event.target.name , base64Image));
};
let convertBase64String = (imageFile) => {
return new Promise((resolve, reject) => {
let fileReader = new FileReader();
fileReader.readAsDataURL(imageFile);
fileReader.addEventListener('load', () => {
if(fileReader.result){
resolve(fileReader.result);
}
else {
reject('Error Occurred');
}
})
});
};
return (
<React.Fragment>
{/* <h1>LordShiva</h1> */}
{
gettingSingleData.loading ?
<React.Fragment>
<img src={spinner} alt="" className="d-block m-auto"/>
</React.Fragment> :
<section className="p-3">
<div className="container">
<div className="row">
<div className="col animated zoomIn">
<p className="h3 text-secondary">Update a Product</p>
{/* <p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet consequuntur, corporis, cumque dolore ea enim esse eveniet exercitationem fugit in iste itaque necessitatibus nemo nisi officiis qui totam. Explicabo!</p> */}
</div>
</div>
</div>
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="card animated zoomInLeft delay-1s">
<div className="card-header bg-secondary text-white">
<p className="h4">Update Product</p>
</div>
<div className="card-body rgba-purple-light">
<form >
<div className="form-group">
<input
name="name"
value={gettingSingleData.singleproduct.name}
onChange={updateInput}
required type="text" className="form-control" placeholder="Product Name"/>
</div>
<div className="form-group">
<div className="custom-file">
<input
name="image"
onChange={updateImage}
type="file" className="custom-file-input" id="customFile"/>
<label className="custom-file-label" htmlFor="customFile">
{
gettingSingleData.singleproduct.image !== '' ?
<img src={gettingSingleData.singleproduct.image} alt="" width="25" height="25"/> :
<span>Product Image</span>
}
</label>
</div>
</div>
<div className="form-group">
<input
name="price"
value={gettingSingleData.singleproduct.price}
onChange={updateInput}
required type="number" className="form-control" placeholder="Price"/>
</div>
<div className="form-group">
<input
name="qty"
value={gettingSingleData.singleproduct.qty}
onChange={updateInput}
required type="number" className="form-control" placeholder="Available Qty"/>
</div>
<div className="form-group">
<textarea
name="info"
value={gettingSingleData.singleproduct.info}
onChange={updateInput}
required className="form-control" rows='2' placeholder="Product Info"/>
</div>
<div>
<div className="form-group mt-3">
<label className="mb-2 fw-bold">Check One</label>
{
checkBoxes.map((cb)=>
<div className="form-check">
<label className="form-check-label" >{cb.name}</label>
<input className="form-check-input" type="checkbox" name="checking" value={cb.name} checked={cb.isChecked} />
</div>
)
}
</div>
<div className="form-group mt-3">
<label className="mb-2 fw-bold">Prepare</label>
{
radio.map((rd)=>(
<div className="form-check">
<label className="form-check-label" >{rd.name}</label>
<input class="form-check-input" type="radio" name="prepare" value={rd.name} checked={rd.isChecked} />
</div>
))
}
</div>
<input type="submit" className="btn btn-secondary btn-sm" value="Update"/>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
}
<div style={{marginBottom : '150px'}}/>
</React.Fragment>