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

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

但我没能得到正确的值。

感谢任何帮助。

编辑：这是我遵循的文档的 link：https://material-ui.com/components/radio-buttons/

Answer 1

这看起来很可能是一种 bug-prone 方法，并且通常直接访问元素是一种 React anti-pattern。

更好的方法是将选中的 <Radio> 元素值存储为您所在州的属性。使用 <RadioGroup> 的 onChange 道具在选择发生变化时挂钩，将其存储在您的状态中并在包含 <RadioGroup> 的 value 道具中使用它。

您应该添加一个事件侦听器，然后根据您可以从事件中获得的 value 更新您的状态。如果你像那样连接它，那么你不必访问该元素来找到它的值 - 你已经知道它处于你的状态。

基本示例如下所示：

class MyForm extends Component {
  state = { selected: "credit" };
  handleChange = ev => {
    this.setState({ selected: ev.target.value });
  };
  render() {
    const { selected } = this.state;
    return (
      <FormControl component="fieldset" name="method-of-payment">
        <RadioGroup onChange={this.handleChange} value={selected}>
          <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>
    );
  }
}

Codepen here

Answer 2

看起来更简单

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

Answer 3

像下面这样定义你的变化

onChange={(e, val)=>console.log(val)

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

Getting value of checked radio button using Material UI Radio

radio-group

radio-button

reactjs

material-ui