我有以下表格react-hook-form
:
function App() {
const {
register,
handleSubmit,
errors,
setError,
clearError,
formState: { isSubmitting }
} = useForm();
const onSubmit = data => {
alert(JSON.stringify(data));
};
return (
<form className="App" onSubmit={handleSubmit(onSubmit)}>
<label>Ethnicity</label>
<SelectEthnicity/>
<input disabled={isSubmitting} type="submit" />
</form>
);
}
export default App;
SelectEthnicity
只是一个基于 select 的包装器组件,如下所示。我不得不这样做,因为它的选择很长,有很多选择。
export class SelectEthnicity extends Component {
state = {
};
render() {
return (
<div>
<select name="Selectethnicity">
<option value="">Select...</option>
<option value="white">White</option>
<option value="black">Black</option>
<option value="multiracial">Multiracial</option>
<option value="european">European</option>
<option value="poles">Poles</option>
<option value="bashkirs">Bashkirs</option>
<option value="slavs">Slavs</option>
<option value="russian">Russian</option>
<option value="romani">Romani</option>
<option value="chechens">Chechens</option>
// didn't add all long option.
</select>
</div>
)
}
}
export default SelectEthnicity
从 App 组件提交表单时,如何获取选定的选项?