Радио кнопки с действием и магазин

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;