Reactjs 将表单挂钩与自动完成材质UI进行反应

我有一个

countries

数组，其中包含

id

和

name

。目前，我正在使用一个MaterialUI

Autocomplete

元素，我有一个react钩子表单。当我提交表单时，我想获取国家Id。目前它正在发布国家名称。是否有一种方法可以发布id而不是名称，而不必从名称中获取id

   <Autocomplete
      className="form-item"
      options={countries}
      getOptionLabel={option => option.name}
      renderInput={params => (
        <TextField
          {...params}
          inputRef={register}
          label="Country"
          name="country"
          placeholder="Select a Country"
          InputLabelProps={{
            shrink: true
          }}
          variant="outlined"
        />
      )}
    />

option.name}
renderInput={params=>(
)}
/>

恐怕没有一种“简单”的方法可以通过当前设置获取ID

但是，您可以钩住

Autocomplete#onChange

事件，并使用

value

prop接管Autocomplete组件的内部值状态。这将导致组件中具有可用的值，并将其用于您的优势

在下面的示例中，id将以

国家id

的形式出现在表单数据中

function CountryAutocomplete() {
  const [value, setValue] = useState(); // `[]` for multiple

  return (
    <React.Fragment>
      <Autocomplete
        className="form-item"
        value={value}
        onChange={(event, value) => setValue(value)}
        options={countries}
        getOptionLabel={option => option.name}
        renderInput={params => (
          <TextField
            {...params}
            inputRef={register}
            label="Country"
            name="country"
            placeholder="Select a Country"
            InputLabelProps={{
              shrink: true
            }}
            variant="outlined"
          />
        )}
      />
      <input value={value?.id} name="country-id" />
    </React.Fragment>
  );
}

函数CountryAutocomplete（）{
const[value，setValue]=useState（）；/`[]`表示多个
返回(
设置值（值）}
选项={countries}
getOptionLabel={option=>option.name}
renderInput={params=>(
)}
/>
);
}

使用react hook表单并将整个

自动完成

作为

道具放入
中。这样，当您提交表单时，您将获得所选选项的整个对象

注意：在react hook form version 6.x中，
onChange
，as道具将使用一个函数，您可以获得
onChange
as参数


(

{
setTimeout（（）=>{//fake api
设定值(
“国家”，
{标签：“嗨，教父”，id:“1972”}，
{shouldDirty:true}
);
}, 2000);
}, []);

上面的演示v6已经更新

另请参见
谢谢！提交工作正常。你知道我最初如何填充表单吗？我目前正在使用reset（）函数。当我获取用户配置文件时，我想设置的值，我收到的对象作为您原来的QN都已排序，请参阅是否可以考虑向上投票，并接受答案。谢谢。最后一个问题是，每当我点击提交，自动完成的值都会变回原来的值。尽管它正在发布正确的对象。我需要刷新以查看更新的值。但是，为什么单击“提交”时，值会自动更改。