如果我们需要 select 多个值，如何使用 Material UI Select 和 React Hook Form

Question

我要 select 多国语言

const languages= [{ label: 'English', value: 'English' },{ label: 'French', value: 'French' },{ label: 'Arabic', value: 'Arabic' },{ label: 'Spanish', value: 'Spanish' }];
<Select 
multiple 
onChange={handleChange}
{...register('language')}>
 {languages?.map((ele, index) => (
    <MenuItem key={index} value={ele.value}> {ele.label}</MenuItem>
 ))}
</Select>

把手改function

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {    
    onChange && onChange(name, event.target.value);
  };

Answer 1

你需要定义一些 state

const [selectedLang, setSelectedLang] = useState([])

在您的手柄更改内，您需要将新值设置为 state

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {    
   setSelectedLang[event.target.value]
  };

他们在文档https://mui.com/material-ui/react-select/中有一个很好的例子