reactjs 生成的 radio 点击无反应或者出现反选的问题

在使用ReactJS开发时遇到一个棘手的问题：点击生成的Radio按钮时，出现反选现象。经过排查，发现将`checked`属性替换为`defaultChecked`可以解决问题。这样做减少了逻辑判断，使代码更接近HTML原生写法。本文记录这个坑，以供初学者参考，并期待深入理解为何需要使用`defaultChecked`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

reactjs 生成的 radio 点击无反应或者出现反选的问题

在点击男女 radio 的时候出现了反选的情况，代码如下：

    <body>
        <div class="checkInPage checkIn_rulesPage">
            <div class="container">
                <div id=checkInRule></div>
            </div>
        </div>
    </body>

    <script type="text/babel">
        var CheckInRule = React.createClass({
            getInitialState: function() {
                return {
                    btnDisabled:true
                };
            },
            radio1Clicked: function () {
                this.setState({
                    btnDisabled:false
                })
            },
            radio2Clicked: function () {
                this.setState({
                    btnDisabled:true
                })
            },
            render: function(){
                var btnDisabled = this.state.btnDisabled;
                return (
                        <div className="checkIn_rulesWrap">
                            <div className="checkIn_rules"></div>
                            <div className="checkIn_rules_optWrap">
                                <label htmlFor="agree" className="radio">
                                    <span className="radio-bg"></span>
                                    <input type="radio" name="isAgree" id="agree"  onChange={this.radio1Clicked} checked={btnDisabled ? "false":"checked"}/> 我已阅读完毕，同意制度
                                    <span className="radio-on"></span>
                                </label>
                                <label htmlFor="disagree" className="radio">
                                    <span className="radio-bg"></span>
                                    <input type="radio" name="isAgree" id="disagree"  onChange ={this.radio2Clicked} checked={btnDisabled ? "checked":"false"}/>我已阅读完毕，不同意该制度
                                    <span className="radio-on"></span>
                                </label>
                                <button className="button" disabled="btnDisabled">确定</button>
                            </div>
                        </div>
                )
            }
        });
        ReactDOM.render(
                <CheckInRule />,
            document.getElementById("checkInRule")
        );
    </script>


</html>

经反复核对，没有发现逻辑或语法的问题，刚开始也没想到这是个坑，后来百度发现

<div className="checkIn_rules_optWrap">
                            <label htmlFor="agree" className="radio">
                                    <span className="radio-bg"></span>
                                    <input type="radio" name="isAgree" id="agree"  onChange={this.radio1Clicked} defaultChecked ={btnDisabled ? "false":"checked"}/> 我已阅读完毕，同意制度
                                    <span className="radio-on"></span>
                                </label>
                                <label htmlFor="disagree" className="radio">
                                    <span className="radio-bg"></span>
                                    <input type="radio" name="isAgree" id="disagree"  onChange ={this.radio2Clicked} defaultChecked ={btnDisabled ? "checked":"false"}/>我已阅读完毕，不同意该制度
                                    <span className="radio-on"></span>
                                </label>
                            <button className="button" disabled="btnDisabled">确定</button>
                        </div>

这样写就OK，或者

<div className="checkIn_rules_optWrap">
                            <label htmlFor="agree" className="radio">
                                <span className="radio-bg"></span>
                                <input type="radio" name="isAgree" id="agree"  onChange={this.radio1Clicked} /> 我已阅读完毕，同意制度
                                <span className="radio-on"></span>
                            </label>
                            <label htmlFor="disagree" className="radio">
                                <span className="radio-bg"></span>
                                <input type="radio" name="isAgree" id="disagree"  defaultChecked onChange ={this.radio2Clicked}/>我已阅读完毕，不同意该制度
                                <span className="radio-on"></span>
                            </label>
                            <button className="button" disabled="btnDisabled">确定</button>
                        </div>

这样更简单，更像原始的HTML的写法，不需判断，减少逻辑上失误的可能性
总之：这个问题的主要症结所在是将checked换成defaultChecked ，至于原因，刚开始学习react还是不懂，等将来更深入下去的时候或许能找到原因，现在只有记下自己踩过的坑或者是自己的疑惑，希望能给其他的小伙伴们一个参考或者是有大神看到小女子的疑惑也可以热心的解释一下为什么要换成defaultChecked 的原因