单选按钮与行动和商店

Question

我正在使用4个单选按钮，我需要使用用户选择的2个选项并将其发送到套接字，但首先，我需要知道如何更新使用动作和商店选择的选项

这里是您可以看到按钮的代码

class BetBehindModal extends Component {

  constructor (props) {
    super(props);
  }

  render () {
    return (
      <div>
        <div>
          <p>Bet Behind Settings</p>
          <p>When seated player Doubles:</p>
          <form>
            <input type="radio" value="double" name="doubles" /> Always Double my bet <br />
            <input type="radio" value="nodouble" name="doubles" /> Never Double my bet
          <p>When seated player Splits:</p>
            <input type="radio" value="split" name="splits" /> Always Split <br />
            <input type="radio" value="nosplit" name="splits" /> Assign bet to 1st hand
          </form>
          <hr />
          <button className="toggleModalBtn" type="submit" onClick={this._confirm}>Confirm</button>
        </div>
      </div>
    );
  }
}

export default BetBehindModal;

所以，有4个选项，用户有权选择其中的2个4.我需要将该信息发送到套接字以及发送到Nodejs中的后端，但最重要的部分是，如何工作这与行动和商店？

Answer 1

据我所知，您很难尝试根据单选按钮更新组件的状态。作为一种方法，您可以添加onChange处理程序：

class BetBehindModal extends Component {

  constructor (props) {
    super(props);

    this.onDoublesChange = this.onDoublesChange.bind(this);
    this.onSplitsChange = this.onSplitsChange.bind(this);
  }

  render () {
    return (
      <div>
        <div>
          <p>Bet Behind Settings</p>
          <p>When seated player Doubles:</p>
          <form>
            <input type="radio" value="double" name="doubles" onChange={this.onDoublesChange}/> Always Double my bet <br />
            <input type="radio" value="nodouble" name="doubles" onChange={this.onDoublesChange}/> Never Double my bet
          <p>When seated player Splits:</p>
            <input type="radio" value="split" name="splits" onChange={this.onSplitsChange}/> Always Split <br />
            <input type="radio" value="nosplit" name="splits" onChange={this.onSplitsChange}/> Assign bet to 1st hand
          </form>
          <hr />
          <button className="toggleModalBtn" type="submit" onClick={this._confirm}>Confirm</button>
        </div>
      </div>
    );
  }

  onDoublesChange({ target }) {
    if (target.checked) this.setState({ doubles: target.value });
  }

  onSplitsChange({ target }) {
    if (target.checked) this.setState({ splits: target.value });
  }
}

export default BetBehindModal;