在react中使用RadioGroup时如何获取完整的事件对象

Question

onChange大家好，我遇到了一个小问题，我在 React 中使用 RadioGroup，我的问题是我无法获取事件对象，而是只获取值，在我的情况下，我想在事件触发时获取名称和值 <RadioGroup name="distance" onChange={handleChange}>     <Radio value="0.5">0.5</Radio>     <Radio value="2000">1</Radio>     <Radio value="3000">2</Radio>     <Radio value="4000">3</Radio>     <Radio value="5000">4</Radio> </RadioGroup> const handleChange = (e) => {    console.log(e);//getting only the value     };

Answer 1

我没有尝试重现你的情况，但尝试这样的事情：

onChange={e => handleChange(e)}

比CB中的

const handleChange = (e, value) => {console.log(e, value)}

此致！

Answer 2

next version (v1.x)和stable version v0.xof有两个区别chakra-ui

<RadioGroup />在（v0.x）中

onChange?: (

    event: React.ChangeEvent<HTMLInputElement>,

    value: IRadio["value"],

  ) => void;

和<RadioGroup />(v1.x)

onChange?(nextValue: StringOrNumber): void;

如果您想参加该活动，您可以降级您的版本chakra-ui

Answer 3

我遇到了同样的问题，因为我希望我handleChange在任何类型的领域工作，我已经这样设置了。

const [formData, setFormData] = React.useState({

    inputField: "",

    checkBoxField: false,

    emailField: "",

    distance: "" /* radioField */

})

function handleChange(event) {

    const { name, value, type, checked } = event.target

    setFormData(prevFormData => {

        return {

            ...prevFormData,

            [name]: type === "checkbox" ? checked : value

        }

    })

}

作为解决方法，我编写了一个返回假事件的函数。

function createEvent(name, value) {

    return {

        target: {

            name: name,

            value: value,

            type: "radio",

            checked: false

        }

    }

}

然后我的RadioGroup会是这样的：

<RadioGroup

    name="distance"

    onChange={

        function(value) {

            props.handleChange(

                createEvent("distance", value)

            )

        }

    }

>

    <Radio value="0.5">0.5</Radio>

    <Radio value="2000">1</Radio>

    <Radio value="3000">2</Radio>

    <Radio value="4000">3</Radio>

    <Radio value="5000">4</Radio>

</RadioGroup>

但是，是的，将name="distance"asRadioGroup的属性不再重要了。如果我们只需要 的一些属性event.target，但仍然希望它们能够尽快添加对完整事件对象的访问权限，则可以使用。