从我的表单中获取空数据对象 react-hook-form

Question

表单是 returning 空数据对象，但它应该 return 在表单中键入值。 onSubmit 函数应该 console.log 表单中给出的值，但我不知道为什么它不起作用。请检查一下。

function App() {
    const { register, handleSubmit } = useForm();
    const onSubmit = (data, e) => {
        e.preventDefault();
        console.log(data);
        console.log('sent');
    };
    const onError = (errors, e) => console.log(errors, e);

    return (
        <div className="App">
            <header className="App-header">
                <form onSubmit={handleSubmit(onSubmit, onError)}>
                    <input
                        name="email"
                        autoComplete="off"
                        placeholder="Your email"
                        ref={register({ name: "email" }, { required: true, pattern: /^\S+@\S+$/i })}
                        
                    />
                    <select
                        defaultValue="default"
                        name="select1"
                        ref={register({ name: "select1" }, { required: true })}
                    >
                        <option value="default" disabled>default</option>
                        <option value="A">A</option>
                        <option value="B">B</option>
                    </select>
                    <textarea
                        name="message"
                        placeholder="Your message"
                        ref={register({ name: "message" }, { required: true })}
                    />
                    <button type="submit">Send</button>
                </form>
            </header>
        </div>
    );
}

Answer 1

一般情况下，在 React 中事情不是这样完成的，你需要一个 formData 状态对象，它与你的表单具有相同的字段，并且在每个表单输入中你都会有一个 onchange 函数，它像这样更新适当的 formData 字段

function App() {
    const { register, handleSubmit } = useForm();
    const [formdata, setformdata] = useState({
          message:"",
          email:"",
          choice:"",
    });
    const onSubmit = ( e) => {
        e.preventDefault();
        //your form data now is in formdata
        console.log(formdata);
        console.log('sent');
    };
    const onError = (errors, e) => console.log(errors, e);
    const onChangeHandler= (field)=>(e)=>setformdata({...formdata,[field]:e.target.data})
    return (
        <div className="App">
            <header className="App-header">
                <form onSubmit={handleSubmit(onSubmit, onError)}>
                    <input
                        name="email"
                        onChange={onchangeHandler('email')}
                        autoComplete="off"
                        placeholder="Your email"
                        ref={register({ name: "email" }, { required: true, pattern: /^\S+@\S+$/i })}
                        
                    />
                    <select
                        defaultValue="default"
                        name="select1"
                        onChange={onchangeHandler('choice')}
                        ref={register({ name: "select1" }, { required: true })}
                    >
                        <option value="default" disabled>default</option>
                        <option value="A">A</option>
                        <option value="B">B</option>
                    </select>
                    <textarea
                        name="message"
                        placeholder="Your message"
                        onChange={onchangeHandler('message')}
                        ref={register({ name: "message" }, { required: true })}
                    />
                    <button type="submit">Send</button>
                </form>
            </header>
        </div>
    );
}

Answer 2

使用 register 方法检查渲染函数：

register 只需要输入元素中的验证参数。

API参考：https://react-hook-form.com/api#register

还有一个入门部分：

https://react-hook-form.com/get-started#Quickstart

return (
    <div className="App">
        <header className="App-header">
            <form onSubmit={handleSubmit(onSubmit, onError)}>
                <input
                    name="email"
                    autoComplete="off"
                    placeholder="Your email"
                    ref={register({ required: true, pattern: /^\S+@\S+$/i })}
                    
                />
                <select
                    name="select1"
                    ref={register({ required: true })}
                >
                    <option value="" disabled>default</option> // make sure this is empty to get validation work.
                    <option value="A">A</option>
                    <option value="B">B</option>
                </select>
                <textarea
                    name="message"
                    placeholder="Your message"
                    ref={register({ required: true })}
                />
                <button type="submit">Send</button>
            </form>
        </header>
    </div>
);

从我的表单中获取空数据对象 react-hook-form

Getting empty data object from my form react-hook-form

javascript

reactjs

react-hooks

react-hook-form