如何在Reactjs中获取单选按钮(反应单选按钮)的值？ [英] How do I get the value of Radio button(react-radio-buttons) in Reactjs?

问题描述

如何获取单选按钮的值，如果在RadioGroup中调用upateRadioButton，则会导致错误。我需要在控制台中使用(反应-单选-按钮)以男性或女性身份打印。单选按钮打印正确，但我无法获取该值。提前谢谢您。

 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>

推荐答案

根据该库的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>

这篇关于如何在Reactjs中获取单选按钮(反应单选按钮)的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！