Javascript 从我的表单获取空数据对象

表单返回空数据对象，但应返回表单中键入的值。 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>
    );
}

函数应用程序（）{
常量{register，handleSubmit}=useForm（）；
const onSubmit=（数据，e）=>{
e、 预防默认值（）；
控制台日志（数据）；
console.log（'sent'）；
};
const onError=（errors，e）=>console.log（errors，e）；
返回(
违约
A.
B
发送
);
}

通常情况下，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>
    );
}

函数应用程序（）{
常量{register，handleSubmit}=useForm（）；
常量[formdata，setformdata]=useState({
消息：“”，
电邮：“，
选择：“，
});
const onSubmit=（e）=>{
e、 预防默认值（）；
//您的表单数据现在位于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}）
返回(
违约
A.
B
发送
);
}

使用

寄存器

方法检查渲染功能：

寄存器

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

API参考：

还有一个入门部分：

返回(
默认值//确保该值为空以获取验证工作。
A.
B
发送
);

它对我不起作用。我修复了onchangehandler到onchangehandler的拼写错误，但是setformdata不是一个函数。哦，很抱歉，我的错，状态变量应该是

[formdata，setformdata]

，但是错误地写了``{formdata，setformdata}``，只需修复该拼写错误，然后再试一次。我再试了一次，发现formdata值未定义//现在我有两个问题，为什么我没有得到select所需的验证？我很困惑，因为当我添加defaultValue来选择它时，它不会在我删除它后返回这个数据，它会返回数据，但我想创建ISSUE并在codesandbox模板上测试它，它工作得很好。因为默认值总是有一个值，所以您应该保留为“”，并且您还可以用useForm（{defaultValues}）填充表单

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>
);