使用材料 UI 单选按钮获取选中单选按钮的值

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> 元素值存储为状态中的属性。当选择发生变化时，使用<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>
    );
  }
}

代码笔在这里

Answer 2

看起来

更简单

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

Answer 3

定义您的更改，如下所示

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