Javascript React select在更改select选项(onChange)时清除其他输入字段的值(状态)
我使用React select在表单上进行选择,当我单击select并更改select的值时,其他字段输入字段的当前状态/值将被清除,并且在提交时,我仅获取选择的值Javascript React select在更改select选项(onChange)时清除其他输入字段的值(状态),javascript,reactjs,jsx,react-select,Javascript,Reactjs,Jsx,React Select,我使用React select在表单上进行选择,当我单击select并更改select的值时,其他字段输入字段的当前状态/值将被清除,并且在提交时,我仅获取选择的值 const [values, setValues] = useState({ username: "", email: "", time: "", }); const handleChange = (event) => { setValues({ ...values,
const [values, setValues] = useState({
username: "",
email: "",
time: "",
});
const handleChange = (event) => {
setValues({
...values,
[event.target.id]: event.target.value,
});
console.log(`Option entered:`, values);
};
const optionsTime = [
{
value: "15",
label: "15 mins",
},
{
value: "30",
label: "30 mins",
},
{
value: "45",
label: "45 mins",
},
{
value: "60",
label: "60 mins",
},
{
value: "75",
label: "75 mins",
},
];
const handleSubmit = (e) => {
e.preventDefault();
console.log(`Option submited:`, values);
alert("You are submitting " + values);
};
const handleTime = (e) => {
//I used created a different onChange function for react-select and used e.value because react select //throws error of undefined id or value when e.target.value is used...
if (values.time !== e.value) {
setValues({ time: e.value });
}
console.log(`Option selected:`, e, values);
};
return (
<div className="headerRow">
<Navbar />
<div className="col-lg-4 schedule-area d-none d-lg-block">
<form id="schedule" onSubmit={handleSubmit}>
<h3>Schedule A Brief</h3>
<div className="form-group">
<input
id="username"
type="text"
placeholder="Contact Person"
className="form-control"
onChange={handleChange}
value={values.username}
required
/>
</div>
<div className="form-group">
<input
id="email"
type="email"
placeholder="Email Address"
className="form-control"
onChange={handleChange}
value={values.email}
required
/>
</div>
<div className="form-group">
<Select
id="time"
type="options"
placeholder="Select Brief Time Projection"
onChange={handleTime}
options={optionsTime}
valueInput={values.time}
isSearchable
required
/>
</div>
<div onClick={handleSubmit} className="book_btn text-center">
Schedule a Brief
</div>
</form>
</div>
</div>
);
const[values,setValues]=useState({
用户名:“”,
电邮:“,
时间:“,
});
常量handleChange=(事件)=>{
设定值({
价值观
[event.target.id]:event.target.value,
});
log(`Option entered:`,value);
};
常量选项时间=[
{
值:“15”,
标签:“15分钟”,
},
{
值:“30”,
标签:“30分钟”,
},
{
值:“45”,
标签:“45分钟”,
},
{
值:“60”,
标签:“60分钟”,
},
{
值:“75”,
标签:“75分钟”,
},
];
常量handleSubmit=(e)=>{
e、 预防默认值();
log(`Option submited:`,value);
警报(“您正在提交”+值);
};
常数handleTime=(e)=>{
//我为react-select创建了一个不同的onChange函数,并使用了e.value,因为react-select//在使用e.target.value时会抛出未定义id或值的错误。。。
if(values.time!==e.value){
setValues({time:e.value});
}
log(`Option selected:`,e,value);
};
返回(
安排简报
安排简报
);
请如何获取所有输入字段的值,包括Submit上的select字段当前您仅返回时间覆盖值状态下的其他旧值 替换
const handleTime = (e) => {
if (values.time !== e.value) {
setValues({ time: e.value });
}
到
我变了
const handleTime = (e) => {
if (values.time !== e.value) {
setValues({ time: e.value });
}
致:
它现在更新了…谢谢你,从你的回复中获得了线索,给了我错误,但对我有用的东西发布在下面。感谢这是一种功能性的设置值的方法,因为它可以保证您收到最新的值。这本应该奏效的。它抛出了什么错误?这里:(应该是声明或语句)第98:28行:解析错误:意外的token const handleTime=(e)=>{if(values.time!==e.value){>setValues((old)=>{…old,time:e.value});}哦,我错过了偏执狂。我建议你使用这种功能性的方式,因为它保证你给出最新的更新状态。我已经更新了我的答案。
const handleTime = (e) => {
if (values.time !== e.value) {
setValues({ time: e.value });
}
const handleTime = (e) => {
if (values.time !== e.value) {
setValues({
...values,
time: e.value
});
}