来自 React-Select 的异步 Select 的 React Hook 表单

Question

处理从 API.But 加载选项的 react-select AsyncSelect 组件的问题我无法通过 controller.AsyncSelect 作品将信息传递给 React-Hook Form完美。数据返回到我的“SelectedValue”状态。谁能帮帮我？

    const [inputValue, setValue] = useState('');
    const [selectedValue, setSelectedValue] = useState(null);
    // handle input change event
    const handleInputChange = value => {
        setValue(value);
    };
    // handle selection
    const handleChange = value => {
        setSelectedValue(value);
    }

const loadOptions = async (inputValue, callback) => {
 
        const response = await fetch(`APIurl`);
        const json = await response.json();
        const object = json.records;
        callback(object.map(i => ({ label: `${i.fields.firstName} - ${i.fields.lasName} , value: i.fields.firstName })))
    }

<Controller
   name="company"
   control={control}
   rules={{ required: true }}
   render={({ field: { onChange, value } }) => (
       <AsyncSelect
         isClearable
         value={selectedValue}
         placeholder={'Your information'}
         loadOptions={loadOptions}
         onInputChange={handleInputChange}
         onChange={handleChange}
         styles={customStyles}
       />)}
/>

Answer 1

react-hook-form 为您管理一些常见的事件和状态（如 value、onChange、onBlur 等），因此在大多数情况下无需定义您自己的状态，除了 onInputChange in AsyncSelect.

您可以尝试select选项并提交表格。

<Controller
    name="company"
    control={control}
    rules={{ required: true }}
    render={({ field }) => (
    <AsyncSelect
        {...field}
        isClearable
        defaultOptions
        placeholder={"Your information"}
        loadOptions={loadOptions}
        onInputChange={handleInputChange}
        // styles={customStyles}
    />
    )}
/>

Here is the codesandbox

来自 React-Select 的异步 Select 的 React Hook 表单

React Hook Form with AsyncSelect from React-Select

javascript

reactjs

react-select

react-hook-form