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

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

感谢您的帮助。

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

Answer 1

它看起来更简单

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

Answer 2

这看起来很可能是一种容易出错的方法，并且通常直接访问元素是一种 React 反模式。

更好的方法是将选中的<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