Javascript React无法设置单选按钮的值

我是新手，我想为单选按钮设置一个值，但是在我检查其中一个之后，在我为对象的属性设置状态之后，它就不会被检查了

这是我的密码：

import React，{Component}来自'React'；
类TestComponent扩展组件{
建造师（道具）{
超级（道具）；
this.completeChange=this.completeChange.bind（this）；
此.state={
英雄：{}
};
}
getHero（）{
}
completeChange（事件）{
var hero={…this.state.hero
};
hero.Complete=event.target.value；
这是我的国家({
英雄：英雄
}, () => {
//调用回调时，不选中单选按钮
console.log（this.state.hero.Complete）；
});
}
render（）{
返回(
选择一个：
对
不
);
}
}
导出默认测试组件；

这里怎么了？这里有人能解决我的问题吗

---

感谢您的高级指导。

您正在改变状态。
试着这样做：

completeChange(event) {
    const {hero} = this.state;
    const nextHero = {
      ...hero,
      Complete: true
    }
    this.setState({ hero: nextHero }, () => {
        //when the callback is called, the radio button is not checked
        console.log(this.state.hero.Complete);
    });
}

如果您想切换状态，那么我建议使用，因为状态更新是异步的，当您的下一个状态依赖于上一个状态时，您应该使用

setState

的函数参数来确保获得最新的状态

大概是这样的：

  completeChange(event) {
    this.setState(state => {
      const { hero } = state;
      const nextHero = {
        ...hero,
        Complete: !hero.Complete
      };
      return {
        hero: nextHero
      };
    });
  }

---

如果要根据单击的按钮的值设置状态，可以选中

event.target.value

：

completeChange(event) {
    const { hero } = this.state;
    const isComplete = event.target.value === 'true';
    const nextHero = {
      ...hero,
      Complete: isComplete
    };
    this.setState({hero: nextHero});
  }

下面是代码的运行示例：

类TestComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
this.completeChange=this.completeChange.bind（this）；
此.state={
英雄：{}
};
}
getHero（）{}
completeChange（事件）{
const{hero}=this.state；
const isComplete=event.target.value=='true'；
常数nextHero={
英雄
完成：isComplete
};
this.setState（{hero:nextHero}）；
}
render（）{
返回(
选择一个：
对
不
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）
您可以直接检查您的
e.target.value==“true”
并将其设置为如下状态

您可以在这里查看正在运行的演示

代码片段

class TestComponent extends Component {
  constructor(props) {
    super(props);

    this.completeChange = this.completeChange.bind(this);

    this.state = {
      hero: {}
    };
  }

  getHero() {

  }

  completeChange(event) {
    this.setState({
      hero: event.target.value == 'true'
    }, () => {
      //when the callback is called, the radio button is not checked
      console.log(this.state.hero);
    });
  }

  render() {
    return (
      <div className="complete">
        <label>Choose one: </label>
        <input type="radio" onChange={this.completeChange}
          value={true} checked={this.state.hero} />Yes

        <input type="radio" value={false} onChange={this.completeChange} checked={!this.state.hero} />No
             </div>
    );
  }
}

render(<TestComponent />, document.getElementById('root'));

类TestComponent扩展组件{
建造师（道具）{
超级（道具）；
this.completeChange=this.completeChange.bind（this）；
此.state={
英雄：{}
};
}
getHero（）{
}
completeChange（事件）{
这是我的国家({
英雄：event.target.value=='true'
}, () => {
//调用回调时，不选中单选按钮
console.log（this.state.hero）；
});
}
render（）{
返回(
选择一个：
对
不
);
}
}
render（，document.getElementById（'root'））；
但在UI中，单选按钮被选中，然后立即取消选中。你能解决这个问题吗？我添加了一个运行示例，我看不出你描述了什么。但是有一个不同的问题，您的逻辑不考虑单击了哪个按钮，但这也可以解决，可以通过
事件检查名称（对按钮进行分组）或值。target
谢谢，它可以工作。你能解释一下你在completeChange函数中改变了什么吗？两件事，1）不改变状态。2） 检查
event.target.event==“true”
的实际值以确定单击了哪个按钮。
event.target.value
是
字符串
不是
布尔值
尝试此completeChange（event）{const{hero}=this.state；const nextHero={…hero，Complete:！hero.Complete}this.setState（{hero:nextHero}，（）=>{//调用回调时，未选中单选按钮console.log（this.state.hero.Complete）；}）；}@Orgil您可以作为答案发布吗？