如何使用挂钩在 MultiStep 反应表单中保存 MultiSelect 值

Question

我在 React 中开发了多步表单。当我在表单中创建 multiselect 选项时，该值未保存在状态中。我正在使用钩子。当我 select 选项并单击下一页时，值不会保存在数组中。这是我的代码：

import React, { useState }   from 'react';   
import Select, { components } from 'react-select';
const UserDetails = ({ setForm, formData, navigation }) => {   
    const techCompanies = [
        { label: "Apple", value: 1 },
        { label: "Facebook", value: 2 },
        { label: "Netflix", value: 3 },
        { label: "Tesla", value: 4 },
        { label: "Amazon", value: 5 },
        { label: "Alphabet", value: 6 },
      ];
      const [selectedOption,setselectedOption] = useState([]);
      const [newarray,setarray]=useState([]);

     const  handleChange = (selectedOption) => {
        setselectedOption(newarray.concat(selectedOption))
        console.log(setselectedOption)
    }
      console.log(selectedOption)

    const { next } = navigation;  
    return( 
        <div className="row justify-content-center mt-5">
            <form>  
             <h1 className="text-center prox_bold">Enter User Details</h1>
                 <Select 
                  options={ techCompanies }
                  isMulti
                  onChange={handleChange}
                  value={selectedOption}/>   
                  <div className="row justify-content-center mt-5">
                   <button className="btn green_btn w250 font22" onClick={next}>
                       Next
                   </button>    
               </div>       
           </form>
         </div>
    );
}
export default UserDetails;

Answer 1

状态是 UserDetails 组件的本地状态。 next() 中的任何逻辑似乎都会根据用户到达的步骤选择性地呈现 UserDetails。

这是一个问题，因为当用户移动到下一步时，您的 UserDetails 被卸载并销毁，因此失去了它的状态。

解决方案是将 selectedOption 数组作为 UserDetails 上的 prop，并将 handleChange 向上移动到父组件中并将其作为 [=12] 上的 prop =] 还有。将 selectedOption 存储在父组件的状态下，该状态不会在步骤更改时卸载。

<UserDetails ... selectedOption={parentStateSelectedOption} handleChange={handleChange} />

在<Select />中：

<Select ... value={parentStateSelectedOption} onChange={handleChange}
                                                        ^ parent handleChange not local

在您的父组件中，放置 handleChange 事件，以便它存储在父状态中。

现在，当用户移动到下一个屏幕时，您已将所选选项安全地存储在父状态中。

如何使用挂钩在 MultiStep 反应表单中保存 MultiSelect 值

How to save MultiSelect values in MultiStep react form using hooks

multi-select

reactjs