ReactJS 单选按钮答案

【问题标题】：ReactJS Radio ButtonsReactJS 单选按钮
【发布时间】：2019-04-13 01:39:43
【问题描述】：

我无法根据所选单选按钮呈现信息。应该发生的是当单击是按钮时，应该出现“欢迎用户”。选择否时，应出现“请登录”。

我在州方面也遇到了麻烦。当我最初单击一个按钮时，控制台按钮将我的状态显示为空白。然后当我单击否时，状态更新为是，反之亦然。不知道这里发生了什么。

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);
  }

组件外的功能

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

【问题讨论】：

标签： reactjs radio-button

【解决方案1】：

我可以在您的代码中看到两个问题：

1) 响应组件在其props.goToLectue 属性中需要一个布尔值，但您传递给它的是一个字符串（“是”或“否”）。要么将主要组件的 state.goToLectue 更改为布尔值，要么您可以执行 <Response goToLecture = {this.state.goToLectue === 'Yes'}/> 之类的操作。

2) 在您的handleChange 方法中，您正在记录this.state.goToLectue - 此值已过时，您不会立即看到setState 调用的效果，而只能在下一次render() 调用中看到。您应该登录 e.target.value。

希望对您有所帮助。

【讨论】：

【解决方案2】：

我可以看到一些问题。

我已经在 Codepen 中为您更正了它们： https://codepen.io/anon/pen/YRWWEQ

在Response 中，if 语句正在传递props.goToLecture，它只能是“是”或“否”，这两个字符串都将解析为真值。我添加了=== 'Yes' 来纠正这个问题。未来的提示是尽可能坚持boolean 值，因为它使条件语句更整洁。
代码中的lecture 和lectue 似乎不匹配。我猜后者是一个错字。
<form> 标签丢失，它是 </form>
在初始渲染时，goToLecture 未设置为状态，因此会引发错误，这可能是您看到空白屏幕的原因。我将默认状态添加为undefined，以允许您选择在单击单选按钮之前不显示任何“响应”。

希望这会有所帮助！

【讨论】：

别担心，我们都是！