React：使用 MUI 表单自动完成 MUI

Question

I've been using a MUI form like this:

<Box component="form" onSubmit={event => {
    return handleSubmit(event);
}} noValidate sx={{mt: 1}}>
    <TextField
        margin="normal"
        required
        fullWidth
        id="title"
        label="Titel"
        name="title"
        autoFocus
    />
    <TextField
        margin="normal"
        required
        multiline
        rows={10}
        fullWidth
        label="Inhalt"
        name="content"
        id="content"
        autoComplete="off"
    />
</Box>

This allowed me to extract the values from the MUI TextField components by using FormData :

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    let newsResponse = await createNews({
        title: data.get('title'),
        content: data.get('content'),
    });
}

This works fine. Now I wanted to add a MUI Autocomplete component to the form:

<Autocomplete
    multiple
    id="tags"
    className={props.className}
    open={open}
    isOptionEqualToValue={(option, value) => option.name === value.name}
    getOptionLabel={(option) => option.name}
    options={tags}
    renderInput={(params) => (
        <TextField
            {...params}
            label="Tags"
            required
            InputProps={{
                ...params.InputProps,
                endAdornment: (
                    <React.Fragment>
                        {loading ? <CircularProgress color="inherit" size={20}/> : null}
                        {params.InputProps.endAdornment}
                    </React.Fragment>
                ),
            }}
        />
    )}
/>

However, I found no way to access the value of said Autocomplete component. It does not even have a name attribute and adding a name attribute to the inner TextField component does not work either.

How can I access the value of it in manner like data.get('tags') ? Considering that both are MUI components I would expect them to have the same API.

Answer 1

The useState hook, something like this:

function MyForm() {
  const [values, setValues] = useState('');
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Autocomplete
        multiple
        id="tags"
        className={props.className}
        open={open}
        isOptionEqualToValue={(option, value) => option.name === value.name}
        getOptionLabel={(option) => option.name}
        options={tags}
        onChange={(event: any, newValues: string[] | null) => {
          setValues(newValues || '');
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Tags"
            required
            InputProps={{
              ...params.InputProps,
              endAdornment: (
                <>
                    {loading ? <CircularProgress color="inherit" size={20}/> : null}
                    {params.InputProps.endAdornment}
                </>
              ),
            }}
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
}