gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 08:09:11 24 4
gpt4 key购买 nike

我正在使用 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 和商店?

最佳答案

据我了解这个问题,您很难尝试根据单选按钮更新组件的状态。作为一种方法,您可以添加 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;

关于javascript - 具有操作和存储功能的单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34223444/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com