React-select 在选择选项更改时清除其他输入字段的值（状态）（onChange）答案

【问题标题】：React-select clears the value (state) of the other input fields when select option is changed (onChange)React-select 在选择选项更改时清除其他输入字段的值（状态）（onChange）
【发布时间】：2020-06-05 11:52:01
【问题描述】：

我在表单上使用 React-select 进行选择，当我单击 select 并更改 select 的值时，其他字段输入字段的当前状态/值被清除并且 onSubmit 我只获取选择

   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>
);

请问我该怎么做才能获取所有输入字段的值，包括 onSubmit 的选择字段

【问题讨论】：

标签： javascript reactjs jsx react-select

【解决方案1】：

目前您只返回 time 覆盖 values 状态中的其他旧值

替换

 const handleTime = (e) => {
     if (values.time !== e.value) {
       setValues({ time: e.value });
   }

到

const handleTime = (e) => {
 if (values.time !== e.value) {
      setValues((old)=>({...old, time: e.value })); }

【讨论】：

谢谢你，从你的回复中带头，给了我错误，但对我有用的贴在下面。谢谢
这是一种设置值的实用方法，因为它可以保证您收到最新的值，所以它是可取的。它应该起作用了。它会抛出什么错误？
此处：（需要声明或声明）第 98:28 行：解析错误：意外令牌 const handleTime = (e) => { if (values.time !== e.value) { > setValues ((old)=>{...old, time: e.value }); }
哦，我错过了括号。我建议您采用这种功能方式，因为它保证您提供最新的更新状态。我已经更新了我的答案。

【解决方案2】：

我变了

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
      });
    }

现在更新了……

【讨论】：