ReactJS单选按钮

根据所选单选按钮呈现信息时遇到问题。当点击“是”按钮时，应该出现“欢迎用户”。选择“否”时，应显示“请登录”

我在美国也遇到了麻烦。当我最初单击按钮时，console按钮将我的状态显示为空白。然后，当我单击“否”时，状态更新为“是”，反之亦然。不知道这里发生了什么

render() {
  return (
    <form onSubmit={this.onFormSubmit}>
        <p>Did you go to the lecture?</p>

      <label>
        <input
          type="radio"
          value="No"
          checked={this.state.goToLectue === 'No'}
          onChange={this.handleChange}
        />
        No
      </label>
      <label>
        <input
          type="radio"
          value= "Yes"
          checked={this.state.goToLectue === 'Yes'}
          onChange={this.handleChange}
        />
        Yes
      </label>

      <div> 
        <Response goToLecture = {this.state.goToLectue}/>        
      </div>
 );
}

  onFormSubmit = e => {        
    e.preventDefault();
    console.log('Chosen: ' + this.state.goToLectue);
  };

  handleChange = e => {
    this.setState({
      goToLectue: e.target.value
    });
    console.log('value of goToLectue onchange: ' + this.state.goToLectue);
  }

render（）{
返回(
你去听讲座了吗

不
对
);
}
onFormSubmit=e=>{
e、 预防默认值（）；
console.log（'selected:'+this.state.goToLectue）；
};
handleChange=e=>{
这是我的国家({
goToLectue:e.target.value
});
log（'goToLectue onchange的值：'+this.state.goToLectue）；
}

组件外部功能

function Response(props) { 
  if (props.goToLectue) 
      return <h1>Welcome User</h1>; 
  else
      return <h1>Please Login</h1>; 
} 

函数响应（props）{
如果（道具goToLectue）
还欢迎用户；
其他的
返回请登录；
} 

我发现您的代码中存在两个问题：

1） 响应组件在其

props.goToLectue

属性中需要一个布尔值，但您正在向其传递一个字符串（“Yes”或“No”）。要么将主组件的

state.goToLectue

更改为布尔值，要么执行类似于

的操作

2） 在您的

handleChange

方法中，您正在记录

this.state.goToLectue

-此值已过时，您不会立即看到

setState

调用的效果，只能在下一次

render（）

调用中看到。您应该改为记录

e.target.value

---

希望能有所帮助。

我可以看到一些问题

我已经在代码笔中为您更正了它们：

在

Response

中，如果正在传递

语句，则
props.goToLecture
只能是“Yes”或“No”，这两个字符串将解析为truthy。我添加了
==“Yes”
以更正此问题。未来的提示是尽可能地坚持使用
布尔值，因为它使条件语句更加整洁

代码中的

讲座

和

演讲

似乎不匹配。我猜后者是个打字错误

标记丢失它的

在初始渲染时，<代码> GoTeCuths<代码>未设置在状态中，因此是投掷错误，这可能是您看到空白屏幕的原因。我添加了默认状态为

undefined

，允许您选择在单击单选按钮之前不显示“响应”

---

希望这有帮助

别担心，我们都是！