React 中没有显示单选按钮

Question

我正在尝试在 react 中创建一个非常简单的单选按钮系统，但无法正确呈现单选按钮。我附上了我的代码以及输出的样子。我该怎么做才能让单选按钮正确显示？谢谢！

https://i.imgur.com/N0ik047.png

  constructor (props) {
    super(props);
    var user = props.location.state;
    this.state = {
      selected: ''
    };
  }

  onChange = e => {
    this.setState({selected: e.target.value})
  }

    render() {
      return(
        <form onSubmit={this.handleSubmit}>
      <h1> Welcome! </h1>
      <h4> Are you a: </h4>
      
      <ul>
        <li>
          <label>
            <input
              type="radio"
              value="student"
              checked={value === "student"}
              onChange={this.onChange}
            />
            <h5> Student </h5>
          </label>
        </li>

        <li>
          <label>
            <input
              type="radio"
              value="professor"
              checked={value === "professor"}
              onChange={this.onChange}
            />
            <h5> Professor </h5>
          </label>
        </li>
      </ul>

      <button type="submit">Submit</button>
    </form>
      )
    
  }
}


  [1]: https://i.stack.imgur.com/DmU0W.png

Answer 1

标记看起来没有任何问题。我怀疑样式阻止了单选按钮的显示。在图像上，所有内容都居中 - h5 标题是否有可能在单选按钮上呈现。如果您检查网页的源代码并在 DOM 中看到表明样式是问题的单选按钮。