如何在反应中获取选择字段的值？

Question

I am using react-hook-form with material UI.On button click I want to get my autocomplete select box value. currently it is taking label as a value I need year should be a value

here is my code

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

when I select { title: "The Godfather", year: 1972 }, the value should be 1972 . currently on button click is shows The Godfather why ?

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

/>

Answer 1

You can find the related API document here

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

Update:
option displayed and value selected using different attributes

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

getOptionLabel

Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided).

renderOption

function(option: T, state: object) => ReactNode option: The option to render. state: The state of the component.

Addition:
Since the question is like something below

when I select { title: "The Godfather", year: 1972 }, the value should be 1972. currently on button click is shows The Godfather why ?

I guess the above answer is handling that demand.

If you simply want the value for your console, just find it from your data since the select option should not be duplicated.

  const onSubmit = data => {
    const temp = top100Films.find(x => x.title === data.resolutionCode);
    const value = temp ? temp.year.toString() : "";
    console.log(value);
  };