如何从另一个组件的react-hook-form读取值

Question

我有以下表格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组件提交表单时如何获取所选选项？

Answer 1

根据文档，您必须register输入才能将其绑定到您的表单。我建议将 传递form给SelectEthnicity组件（或仅传递给register方法）：

function App() {
  const form = useForm();
  const {
    register,
    handleSubmit,
    errors,
    setError,
    clearError,
    formState: { isSubmitting }
  } = form;
  const onSubmit = data => {
    alert(JSON.stringify(data));
  };

  return (    
     <form className="App" onSubmit={handleSubmit(onSubmit)}>
        <label>Ethnicity</label>
        <SelectEthnicity form={form}/>

        <button disabled={isSubmitting} type="submit" />
     </form>
 );
}

export default App;

然后通过 props 注册输入：

export class SelectEthnicity extends Component {
    ...
    render() {
        return (
            <div>
                <select name="Selectethnicity" ref={this.props.form.register({required: true})}>
                    <option value="">Select...</option>
                    // didn't add all long option. 
                </select>
            </div>
        )
    }
}

export default SelectEthnicity

在您的提交函数中，您现在应该具有选定的值。