帶有 react-hook-form 的單選按鈕

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，如下所示

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;

我希望這能解決這個問題。