React Material UI Autocomplete - 如何将文本名称显示为选择但将 ID 作为值发送？

Question

MATERUAL UI 自动完成组件 工作正常，但我想将 object.id 作为 onSelect 事件值 (event.target.value)，而不是 object.name。换句话说，我想将object.name 显示为选择项标签，但我想将object.id 显示为onSelect 事件值（event.target.value）。现在，我的 event.target.value 与选择项目标签 (object.name) 相同。这是一个示例（来自 Material UI 文档）：

options 对象是这样的：

const options = [
  { id: "01", name: "Peter" },
  { id: "02", name: "Mary },
  { id: "03", name: "John" }
]

自动完成功能与 Material UI 文档中的一样：

<Autocomplete
      id="asynchronous-demo"
      fullWidth
      open={open}
      onOpen={() => {
        setOpen(true)
      }}
      onClose={() => {
        setOpen(false)
      }}
      getOptionLabel={(option) => option.name}
      options={options}
      loading={loading}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Asynchronous"
          variant="outlined"
          onChange={(event) => {
            if (event.target.value !== '' || event.target.value !== null) {
              onChangeHandle(event.target.value)
            }
          }}
          onSelect={(event) => {
            onSelectHandle(event)
          }}
          InputProps={{
            ...params.InputProps,
            endAdornment: (
              <React.Fragment>
                {loading ? (
                  <CircularProgress color="inherit" size={20} />
                ) : null}
                {params.InputProps.endAdornment}
              </React.Fragment>
            ),
          }}
        />
      )}
    />

onSelect 我总是得到object.name 为event.target.value，但我想返回 object.id 为event.target.value。

有人知道吗？

Answer 1

您目前正在从 TextField 的 onSelect 中获取值，而不是从 Autocomplete 的 onChange 中获取值。

<Autocomplete
    ...
    onChange={(event, newValue) => {
        onSelectHandle(newValue)
    }}
    renderInput={(params) => (
        <TextField
            {...params}
            label="Asynchronous"
            variant="outlined"
            onChange={(event) => {
                if (event.target.value !== '' || event.target.value !== null) {
                    onChangeHandle(event.target.value)
                }
            }}
            ...
        />
    )}
/>

更多信息，请查看可控状态部分in the Autocomplete documentation。