使用react select中的asyncselect的react钩子窗体

tzcvj98z  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(441)

处理从api加载选项的react-select asyncselect组件的问题。但是我无法通过控制器将信息传递给react-hook表单。asyncselect工作得非常好。数据在我的“SelectedValue”状态下很好地返回。有人能帮我吗?

  1. const [inputValue, setValue] = useState('');
  2. const [selectedValue, setSelectedValue] = useState(null);
  3. // handle input change event
  4. const handleInputChange = value => {
  5. setValue(value);
  6. };
  7. // handle selection
  8. const handleChange = value => {
  9. setSelectedValue(value);
  10. }
  1. const loadOptions = async (inputValue, callback) => {
  2. const response = await fetch(`APIurl`);
  3. const json = await response.json();
  4. const object = json.records;
  5. callback(object.map(i => ({ label: `${i.fields.firstName} - ${i.fields.lasName} , value: i.fields.firstName })))
  6. }
  1. <Controller
  2. name="company"
  3. control={control}
  4. rules={{ required: true }}
  5. render={({ field: { onChange, value } }) => (
  6. <AsyncSelect
  7. isClearable
  8. value={selectedValue}
  9. placeholder={'Your information'}
  10. loadOptions={loadOptions}
  11. onInputChange={handleInputChange}
  12. onChange={handleChange}
  13. styles={customStyles}
  14. />)}
  15. />
iezvtpos

iezvtpos1#

react-hook-form 为您管理一些常见的事件和状态(如value、onchange、onblur等),因此在大多数情况下无需定义自己的状态,除了 onInputChange 在里面 AsyncSelect .
您可以尝试选择该选项并提交表单。

  1. <Controller
  2. name="company"
  3. control={control}
  4. rules={{ required: true }}
  5. render={({ field }) => (
  6. <AsyncSelect
  7. {...field}
  8. isClearable
  9. defaultOptions
  10. placeholder={"Your information"}
  11. loadOptions={loadOptions}
  12. onInputChange={handleInputChange}
  13. // styles={customStyles}
  14. />
  15. )}
  16. />

这是代码沙盒

展开查看全部

相关问题