具有反应挂钩形式的单选按钮

Question

我用 react-hook-form 创建了一个表单。它在控制台中正确记录了“fullName”和“city”，但没有记录单选按钮。使用单选按钮，您得到的结果是“null”。

我的代码如下

import React from 'react'
import './App.css';
import {useForm} from "react-hook-form";

function App() {
    const {register, handleSubmit} = useForm();

    function onSubmitButton(data) {
        console.log(data)
    }

    return (
        <>
            <h1>Order weather</h1>
            <form onSubmit={handleSubmit(onSubmitButton)}>
                <input
                    {...register("fullName")}
                    type="text"
                    name="fullName"
                    placeholder="Name and surname"
                    id="name"
                />
                <input
                    {...register("city")}
                    type="text"
                    name="city"
                    placeholder="City"
                    id="city"
                />
                <p>I would like to:</p>
                <label htmlFor="field-rain">
                    <input
                        {...register("rain")}
                        type="radio"
                        name="weather"
                        value="rain"
                        id="field-rain"
                    />
                    Rain
                </label>
                <label htmlFor="field-wind">
                    <input
                        {...register("wind")}
                        type="radio"
                        name="weather"
                        value="wind"
                        id="field-wind"
                    />
                    Lots of wind
                </label>
                <label htmlFor="field-sun">
                    <input
                        {...register("sun")}
                        type="radio"
                        name="weather"
                        value="sun"
                        id="field-sun"
                    />
                    Sunny
                </label>
                <button type="submit">
                    Send
                </button>
            </form>
        </>
    );
}

export default App;

当我关闭 name= "weather" 并检查按钮时，它确实将它放在控制台中，但它不允许我同时检查所有按钮。任何人都知道如何确保我可以将检查到控制台的内容？

Answer 1

由于雨、风、太阳应该被赋予相同的值，我们需要传递相同的参数来注册函数，如下所示

function App() {
    const {register, handleSubmit} = useForm();

    function onSubmitButton(data) {
        console.log(data)
    }

    return (
        <>
            <h1>Order weather</h1>
            <form onSubmit={handleSubmit(onSubmitButton)}>
                <input
                    {...register("fullName")}
                    type="text"
                    name="fullName"
                    placeholder="Name and surname"
                    id="name"
                />
                <input
                    {...register("city")}
                    type="text"
                    name="city"
                    placeholder="City"
                    id="city"
                />
                <p>I would like to:</p>
                <label htmlFor="field-rain">
                    <input
                        {...register("weather")}
                        type="radio"
                        name="weather"
                        value="rain"
                        id="field-rain"
                    />
                    Rain
                </label>
                <label htmlFor="field-wind">
                    <input
                        {...register("weather")}
                        type="radio"
                        name="weather"
                        value="wind"
                        id="field-wind"
                    />
                    Lots of wind
                </label>
                <label htmlFor="field-sun">
                    <input
                        {...register("weather")}
                        type="radio"
                        name="weather"
                        value="sun"
                        id="field-sun"
                    />
                    Sunny
                </label>
                <button type="submit">
                    Send
                </button>
            </form>
        </>
    );
}

export default App;

我希望这能解决问题。

具有反应挂钩形式的单选按钮

Radio buttons with react-hook-form

forms

radio

reactjs

react-hook-form