javascript - 具有操作和存储功能的单选按钮

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个选项，用户有权选择这4个中的2个。我需要将该信息发送到套接字以及Nodejs制作的后端，但最重要的部分是如何工作与这个 Action 和商店？

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;