Question

我正在创建一个表单，现在尝试进行一些输入验证，而我正努力从我的无线电组件中获取已检查的值。

在一个文件中，我有：

<FormControl component="fieldset" name="method-of-payment">
    <RadioGroup onChange={this.handleChange} >
        <FormControlLabel value="credit" control={<Radio />} label="Credit Card"/>
        <FormControlLabel value="check" control={<Radio />} label="Check"/>
        <FormControlLabel value="purchase-order" control={<Radio />} label="Purchase Order"/>
     </RadioGroup>
</FormControl>

我正在尝试在另一个文件中获取执行此操作的价值（对其他所有文件都起作用）：

this.setState({
    method-of-payment: document.getElementsByName('method-of-payment')[0].value
})

但是我没有运气获得正确的值。

感谢您的帮助。

编辑：这是我关注的文档的链接：https://material-ui.com/components/radio-buttons/

Answer 1

这似乎是一种容易出错的方法，通常直接访问元素是React反模式。

更好的方法是将选中的<Radio>元素值存储为状态中的属性。使用您的onChange的{{1}}道具来钩住选择的更改时间，将其存储在您的状态下，并在包含<RadioGroup>的{{1}}道具中使用它。

您应该添加事件侦听器，然后根据可以从事件中获取的value更新状态。如果像这样将其连接起来，则不必访问该元素即可找到其值-您已经知道它的状态。

基本示例将如下所示：

<RadioGroup>

Codepen here

Answer 2

看起来更简单

document.querySelector('[name="method-of-payment"]:checked')

使用Material UI Radio获取选中的单选按钮的价值

2 个答案: