【发布时间】：2021-10-31 14:47:23
【问题描述】：
我有一个表单，在该表单中我有所有字段，如输入、下拉、单选和复选框。 现在我可以使用 Redux 将我的数据发布到服务器，并且我可以发布除复选框值和单选按钮值之外的所有数据...... 我需要对复选框和单选按钮的值进行哪些更改..
这是行动：
export const createData =(product) =>{
return async (dispatch)=>{
try {
let dataUrl ="http://localhost:3000/users";
let res = await axios.post(dataUrl,product);
dispatch({type :CREATE_DATA, payload:res.data});
} catch(error){
console.log(error)
}
}
}
这是减速器：
export const reducerName = (state = initialstate, action) => {
switch (action.type) {
case actiondata.GETALL_DATA:
return {
...state,
productdata : action.payload
}
case actiondata.CREATE_DATA :
return {
...state
}
default:return state
}
}
这是模型弹出窗口：
const AddModel = () => {
const [model, setmodel] = useState(false)
const adduser = () => {
setmodel(true);
};
const closeModal = () => {
setmodel(false);
};
const [data, setdata] = useState({
"UserName" : "",
"PhoneNumber" : "",
"email" : "",
"dropDown" :"",
"gender" : null,
"checking" :[]
})
let dispatch = useDispatch();
//Reading the Data from Store
let readdatafromstore = useSelector((state)=>{
return state.keepdatatostore;
})
const handleChnage=(e)=>{
setdata({...data,[e.target.name]:e.target.value});
}
const handleSubmit=(e)=>{
e.preventDefault();
dispatch(allActions.createData(data));
}
return (
<React.Fragment>
<div className="container">
<button type="button" className="btn btn-primary" onClick={adduser}>Add User</button>
</div>
{model && (
<div className="modal" style={{ display: "block" }}>
<div className="modal-dialog" style={{ maxWidth: "60%" }}>
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Modal title</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" onClick={closeModal}></button>
</div>
<div className="modal-body">
<form>
<div className="row">
<div className="col">
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="form-label fw-bold">UserName</label>
<input type="text" className="form-control" placeholder='UserName' name="UserName" onChange={handleChnage} />
</div>
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="form-label fw-bold">PhoneNumber</label>
<input name="phone" className="form-control" placeholder='PhoneNumber' name="PhoneNumber" onChange={handleChnage} />
</div>
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="form-label fw-bold">Email</label>
<input type="email" className="form-control" placeholder='EmailAddress' id="exampleInputEmail1" aria-describedby="emailHelp" name="email" onChange={handleChnage} />
</div>
{/* <div className="mb-3">
<label
htmlFor="exampleInputPassword1"
className="form-label"
>
Date
</label>
<input
type="date"
className="form-control"
id="exampleInputPassword1"
/>
</div> */}
</div>
<div className="col">
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="fw-bold">DropDown Value</label>
<select className="form-select" aria-label="Default select example" name="dropDown" onChange={handleChnage} >
<option selected>Select From Dropdown</option>
<option value="ReactJS">ReactJS</option>
<option value="JavaScript">JavaScript</option>
<option value="HtmlCss">HtmlCss</option>
</select>
</div>
<div className="mb-3">
<label className="mb-2 fw-bold">Gender</label>
<div className="form-check">
<input className="form-check-input" type="radio" name="gender" id="male" onChange={handleChnage}/>
<label className="form-check-label" htmlFor="flexRadioDefault1" >Male</label>
</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="gender" id="female" onChange={handleChnage}/>
<label className="form-check-label" htmlFor="flexRadioDefault2">Female</label>
</div>
</div>
<div className="mb-3">
<label className="mb-2 fw-bold">Checkbox Value</label>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
<label className="form-check-label" htmlFor="flexCheckDefault">Javascript</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="flexCheckChecked" />
<label className="form-check-label" htmlFor="flexCheckChecked">React JS</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="flexCheckChecked" />
<label className="form-check-label" htmlFor="flexCheckChecked">HTML</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="flexCheckChecked" />
<label className="form-check-label" htmlFor="flexCheckChecked">CSS</label>
</div>
</div>
</div>
</div>
</form>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal" onClick={closeModal}>Close</button>
<button type="button" className="btn btn-primary" onClick={handleSubmit}>Add User</button>
</div>
</div>
</div>
</div>
)}
</React.Fragment>
)
}
【问题讨论】：
标签： redux react-hooks