ReactJS:管理单选按钮行为

Question

我有一个表格，其中有两个单选按钮，其中一个是免费的，为付费。我应该设法回答这个问题。因此，如果用户点击：

Gratis: Yes --> Pay: No. 
Gratis: No ---> Pay: Yes
Pay: Yes ---> Gratis: No.
Pay: No ---> Gratis: Yes



if(Gratis == "true" && Pay !== undefined){
    questionnaire.SelfCertification.Pay = "false"
  }
  if(Gratis == "true" && Pay === undefined){
    Pay = "false"
  }
  if(Gratis == "false" && Pay !== undefined){
    Pay = "true"
  }
  if(Gratis == "false" && Pay === undefined){
    Pay = "true"
  }
  if(Pay == "true" && Gratis === undefined){
    Gratis = "false"
  }
  if(Pay == "false" && Gratis === undefined){
    Gratis = "true"
  }

我尝试过这样做，但有一些情况不能正常工作，例如：

如果我选择

Pay: Yes --> Gratis: No (and this is ok), 
//but if now i select 
Pay: No --> Gratis: No ( and it should go to Yes).

我该怎么做呢？

Answer 1

您可以对这两个(或更多)无线电输入使用一个无线电组，并在它们之间切换。这里有一个非常简单的例子。

const [gratisPay, setGratisPay] = useState("Gratis");

const changeHandler = (e) => {
  // e.target.value is the radio input value
  // do what you need, like update some state
  setGratisPay(e.target.value);
};

...

<form onSubmit={submitHandler}>
  <label>
    Gratis
    <input
      type="radio"
      value="Gratis"
      name="gratisPay"
      checked={gratisPay === 'Gratis'}
      onChange={changeHandler}
      />
  </label>
  <label>
    Pay
    <input
      type="radio"
      value="Pay"
      name="gratisPay"
      checked={gratisPay === 'Pay'}
      onChange={changeHandler}
    />
  </label>
  <button type="submit">Submit</button>
</form>

提交表单只是记录单选项组的值。

演示

​

​