我有一个我想完成的简单任务:每当单选按钮在其组之间切换时触发一个函数。
class App extends Component {
onButtonClick() {
console.log('something was clicked!')
}
return (
<div>
<button onClick={this.onButtonClick.bind(this)}>
Click me
</button>
<input
type="checkbox"
onChange={this.onButtonClick.bind(this)}
/>
<input
type="radio"
value="yes"
name="answer"
onChange={this.onButtonClick.bind(this)}
/>
<input
type="radio"
value="no"
name="answer"
onChange={this.onButtonClick.bind(this)}
/>
</div>
)
}
按钮和复选框工作得很好。如果你点击它,它会多次触发该功能。单选按钮触发一次然后停止。
这几乎就像 ReactJS 出于某种原因停止监视单选按钮的 onChange 一样。任何帮助将不胜感激。谢谢!
更新
它似乎在 https://codesandbox.io/s/rGMGzJNL 中正常工作,但在我的本地环境中无法正常工作,这非常令人困惑。如果我弄清楚发生了什么,将会更新,但如果有人以前遇到过这个问题,我将不胜感激!
最佳答案
需要在每个radio上设置checked属性,并在state中保存radio状态。
class App extends Component {
state = {
radio: 'yes',
}
onButtonClick() {
console.log("something was clicked!");
}
onRadioChange(value) {
console.log("radio change");
this.setState({
radio: value,
})
}
render() {
return (
<div>
<button onClick={() => this.onButtonClick()}>
Click me
</button>
<input type="checkbox" onClick={() => this.onButtonClick()} />
<input
type="radio"
value="yes"
name="answer"
checked={this.state.radio === 'yes'}
onChange={(e) => this.onRadioChange('yes')}
/>
<input
type="radio"
value="no"
name="answer"
checked={this.state.radio === 'no'}
onChange={(e) => this.onRadioChange('no')}
/>
</div>
);
}
}
关于javascript - Radio Input onChange 只触发一次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45450285/