带操作和存储功能的单选按钮

Radio buttons with action and store

本文关键字：单选按钮 功能 存储 操作      更新时间：2023-09-26

我使用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个选项，用户有权从这4个选项中选择2个。我需要将这些信息发送到一个套接字，也发送到Nodejs中制作的后端，但最重要的部分是，如何使用操作和存储来处理这些信息？

据我所知，您很难尝试基于单选按钮更新组件的状态。作为一种方法，您可以添加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;
相关文章：