1

我正在使用react-hook-form材质 UI。单击按钮时我想获取我的autocomplete select框值。目前它label作为value我需要的年份应该是一个值

这是我的代码

https://codesandbox.io/s/react-hook-form-get-started-nt4kh

当我选择{ title: "The Godfather", year: 1972 },的值应该是1972. 当前点击按钮显示The Godfather为什么？

<Autocomplete
        options={top100Films}
        getOptionLabel={option => option.title}
        renderInput={params => (
          <TextField
            {...params}
            inputRef={register}
            label={"Resolution Code"}
            variant="outlined"
            name={"resolutionCode"}
            fullWidth
          />
        )}

在此处输入图像描述 />

4

1 回答 1

1

你可以在这里找到相关的 API 文档

// From
getOptionLabel={option => option.title}
// To
getOptionLabel={option => option.year.toString()}

更新：
使用不同属性显示选项和选择值 

renderOption={params => (
  <Typography gutterBottom variant="subtitle1" component="h2">
    {params.title}
  </Typography>
)}
getOptionLabel={option => option.year.toString()}

获取选项标签

用于确定给定选项的字符串值。它用于填充输入（如果未提供 renderOption，则用于填充列表框选项）。

渲染选项

function(option: T, state: object) => ReactNode option：渲染的选项。state：组件的状态。

编辑 React Hook 表单 - 开始

加法：
由于问题类似于以下内容

当我选择 { title: "The Godfather", year: 1972 } 时，值应该是 1972。当前点击按钮是显示 The Godfather 为什么？

我想上面的答案是处理这种需求。

如果您只是想要控制台的值，只需从您的数据中找到它，因为不应重复选择选项。 

  const onSubmit = data => {
    const temp = top100Films.find(x => x.title === data.resolutionCode);
    const value = temp ? temp.year.toString() : "";
    console.log(value);
  };
于 2020-02-07T01:54:35.650 回答