Javascript react中的True和false单选按钮

这是我目前的代码：

我的组件中的状态

this.state = {
            name: '',
            sample: '',
            description: '',
            isPublished: null,

        };

这是单选按钮的处理程序

_handleRadio(event) {
let value = true;
if (typeof event.currentTarget.value === 'string') {
    (event.currentTarget.value === 'true' ? value = true : value = false );
}
this.setState({isPublished: value});
}

<div className="radio">
                        <label><input type="radio" name="isPublished" value="true" onChange={this._handleRadio} />Yes</label>
                    </div>
                    <div className="radio">
                        <label><input type="radio" name="isPublished" value="false" onChange={this._handleRadio} />No</label>
                    </div>

最后是我的单选按钮

_handleRadio(event) {
let value = true;
if (typeof event.currentTarget.value === 'string') {
    (event.currentTarget.value === 'true' ? value = true : value = false );
}
this.setState({isPublished: value});
}

<div className="radio">
                        <label><input type="radio" name="isPublished" value="true" onChange={this._handleRadio} />Yes</label>
                    </div>
                    <div className="radio">
                        <label><input type="radio" name="isPublished" value="false" onChange={this._handleRadio} />No</label>
                    </div>

---

为什么在提交过程中isPublished的状态会返回true，即使将其更改为false后也是如此

我认为存在一些结构性问题。没有垃圾箱很难说，但我看到的是

首先，您将非受控组件与受控方法混合。例如，您没有在单选按钮（受控）上设置checked属性，但也没有检查refs（或设置它们）的值（不受控）。受控对象应具有选中属性

其次，有很多字符串与布尔值不匹配。假设这些按钮的唯一值为true和false，请尝试：

const isPublished = event.currentTarget.value === 'true' ? true: false;

我把它放在一支笔里

类表单扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
示例：“”，
说明：“”，
isPublished:null，
};
this.\u handleRadio=this.\u handleRadio.bind（this）；
this.\u handleSubmit=this.\u handleSubmit.bind（this）；
}
_handleRadio（活动）{
const isPublished=event.currentTarget.value=='true'？true:false；
console.log（'handle'，已发布）；
this.setState（{isPublished}）；
}
_handleSubmit（事件）{
event.preventDefault（）；
event.stopPropagation（）；
const sampleObj=this.state；
console.log（sampleObj）；
}
render（）{
const{isPublished}=this.state；
console.log（isPublished，true）；
返回(
对
不
提交
);
}
} 

我认为存在一些结构性问题。没有垃圾箱很难说，但我看到的是

首先，您将非受控组件与受控方法混合。例如，您没有在单选按钮（受控）上设置checked属性，但也没有检查refs（或设置它们）的值（不受控）。受控对象应具有选中属性

其次，有很多字符串与布尔值不匹配。假设这些按钮的唯一值为true和false，请尝试：

const isPublished = event.currentTarget.value === 'true' ? true: false;

我把它放在一支笔里

类表单扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
示例：“”，
说明：“”，
isPublished:null，
};
this.\u handleRadio=this.\u handleRadio.bind（this）；
this.\u handleSubmit=this.\u handleSubmit.bind（this）；
}
_handleRadio（活动）{
const isPublished=event.currentTarget.value=='true'？true:false；
console.log（'handle'，已发布）；
this.setState（{isPublished}）；
}
_handleSubmit（事件）{
event.preventDefault（）；
event.stopPropagation（）；
const sampleObj=this.state；
console.log（sampleObj）；
}
render（）{
const{isPublished}=this.state；
console.log（isPublished，true）；
返回(
对
不
提交
);
}
} 

我看不到您的实际JSX，但是如果您想让它们反映当前状态，您需要在相应的单选按钮中设置checked属性

比如说：

checked={this.state.isPublished === true}

第一个单选按钮

checked={this.state.isPublished === false}

---

第二个问题。

我看不到实际的JSX，但是如果希望它们反映当前状态，则需要在相应的单选按钮中设置checked属性

比如说：

checked={this.state.isPublished === true}

第一个单选按钮

checked={this.state.isPublished === false}

---

第二个问题。

我感觉你的_handleRadio方法中的if块是罪魁祸首，试着在其中添加一个console.log（），看看它是否被击中，并且你从你的选择中得到了正确的值。@JustinHerter刚刚试过，一切似乎都启动了。我认为同样的事情首先使用setState的回调方法在设置它之后检查isPublished的值，如下所示。setState（{isPublished:value}，function（）{console.log（“state:，this.state）}）；让我们确保事情按照我们预期的方式进行设置，然后继续调试。好主意。是的，它绝对记录了正确的值。即使是console.log（sampleObj）也会返回值，直到重定向后抓取对象，值才会变回true。路由更改时是否会触发_handleRadio方法？检查您的日志。我感觉您的if block in _handleRadio方法是罪魁祸首，请尝试在其中添加一个console.log（），以查看它是否被击中，以及您是否从您的选择中获得了正确的值。@JustinHerter刚刚尝试过，一切似乎都启动了。我认为同样的事情首先使用setState的回调方法在设置它之后检查isPublished的值，如下所示。setState（{isPublished:value}，function（）{console.log（“state:，this.state）}）；让我们确保事情按照我们预期的方式进行设置，然后继续调试。好主意。是的，它绝对记录了正确的值。即使是console.log（sampleObj）也会返回值，直到重定向后抓取对象，值才会变回true。路由更改时是否会触发_handleRadio方法？检查你的日志。这很有效，但真正的问题是我遇到的API。在翻了他们的文档之后，我找到了它。谢谢你解释受控与非受控的区别，因为我是个新手。谢谢，很高兴这有帮助！这很好，但真正的问题是我遇到的API。在翻了他们的文档之后，我找到了它。谢谢你解释受控与非受控的区别，我需要它，因为我是公平的