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

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

更好的方法是将检查的元素值存储<Radio>为您所在州的属性。使用onChangeyour 的 prop<RadioGroup>来挂钩选择何时更改，将其存储在您的 state 中并在value您的 contains 的 prop中使用它<RadioGroup>。

您应该添加一个事件侦听器，然后根据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>
    );
  }
}

代码笔在这里