如何从另一个组件的 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 的包装器组件，如下所示。我不得不这样做，因为它很长 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组件提交表单时，如何获取selected选项？

Answer 1

根据 documentation，您必须 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

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

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

How to read value from react-hook-form from another component

reactjs

react-hook-form