如何在 Reactjs 中获取单选按钮（react-radio-buttons）的值？

Posted 2023-03-05

【中文标题】如何在 Reactjs 中获取单选按钮（react-radio-buttons）的值？

【英文标题】：How do I get the value of Radio button(react-radio-buttons) in Reactjs?

【发布时间】：2018-03-25 12:55:32

【问题描述】：

如何获取单选按钮的值，如果我在 RadioGroup 中调用 updateRadioButton 会导致错误。我需要使用（react-radio-buttons）在控制台中打印为男性或女性。单选按钮打印正确，但我无法获得值。提前谢谢你。

 class CreateUserComponent extends React.Component 
        constructor(props) 
        super(props); 
        this.state=radio:''
    

    updateRadioButton(e) 
        this.setState( radio: e.target.value );
    

    <RadioGroup horizontal>
            <RadioButton value="Male">Male</RadioButton>
            <RadioButton value="Female">Female</RadioButton>
        </RadioGroup>

【参考方案1】：

根据这个库的DOCS，RadioGroup 有一个 onChange 属性处理程序，你可以传递它，它将返回选定的值，然后你可以将它设置为状态或传递它。

这是您的代码的小型运行示例：

debugger
const RadioGroup = ReactRadioButtonsGroup.ReactRadioButtonsGroup;
const RadioButton = ReactRadioButtonsGroup.ReactRadioButton;

class App extends React.Component 
  constructor(props) 
    super(props);
    this.state = ;
  

  onRadiochange = value => 
    console.log(value);
  ;

  render() 
    return (
      <div>
        <RadioGroup horizontal onChange=this.onRadiochange>
          <RadioButton value="Male">Male</RadioButton>
          <RadioButton value="Female">Female</RadioButton>
        </RadioGroup>
      </div>
    );
  


ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-radio-buttons-group@1.0.2/build/bundle.min.js"></script>
<div id="root"></div>

【讨论】：

@PremKumar 没问题，我用你的代码添加了一个正在运行的 sn-p

哇，非常感谢 :-)

【参考方案2】：

来自this react-radio-buttons example：

class CreateUserComponent extends React.Component 
  ... 
  updateRadioButton(value) 
    this.setState( radio: value );
  

  render() 
    ...

    return (
      <RadioGroup horizontal onChange=this.updateRadioButton >
        <RadioButton value="Male">Male</RadioButton>
        <RadioButton value="Female">Female</RadioButton>
      </RadioGroup>
    )
    ...
  

【参考方案3】：

将 onChange 事件添加到 RadioGroup。

class CreateUserComponent extends React.Component 
    constructor(props) 
    super(props); 
    this.state=radio:'';
    this.updateRadioButton = this.updateRadioButton.bind(this);


updateRadioButton(value) 
    this.setState( radio: value );


render() 
 return(
   <RadioGroup horizontal onChange=this.updateRadioButton>
        <RadioButton value="Male">Male</RadioButton>
        <RadioButton value="Female">Female</RadioButton>
   </RadioGroup>
 );

【讨论】：

谢谢。但是， e.target.value 不起作用。 updateRadioButton(value) this.setState( radio: value )

你是对的。我没有注意到这一点。我刚刚更新了。