Question

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

我在各州也遇到麻烦。最初单击按钮时，控制台按钮将我的状态显示为空白。然后，当我单击“否”时，状态将更新为“是”，反之亦然。不知道这是怎么回事。

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

Answer 1

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

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

2）在您的handleChange方法中，您正在记录this.state.goToLectue-这个值是过时的，您不会立即看到setState调用的效果，而只会看到下一个{ {1}}个电话。您应该改为登录render()。

希望有帮助。

Answer 2

我可以看到很多问题。

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

在Response的{{1}}语句中，传递的if只能是“是”或“否”，这两个字符串都将解析为真。我添加了props.goToLecture来更正此问题。未来的技巧是尽可能使用=== 'Yes'值，因为它会使条件语句变得更加整洁。
代码中boolean和lecture似乎不匹配。我猜后者是一个错字。
lectue标签丢失了，是<form>
在初始渲染时，</form>未设置为状态，因此抛出错误，这可能就是为什么您看到空白屏幕的原因。我将默认状态添加为goToLecture，以便您选择不显示“响应”，直到您选择单选按钮为止。

希望这会有所帮助！

ReactJS单选按钮

2 个答案: