React搜索框无法输入文本问题排查及解决

存在文本元素遮挡搜索框，为该文本添加pointer-events: none;样式后问题修复。

问题描述 #

我正在学习React，尝试制作一个搜索框，需求是用户提交文本时，将输入内容打印到控制台或弹出提示，但目前搜索框无法输入任何内容。

我查阅了React官方文档，认为问题可能与状态设置有关，但不确定具体出错位置。看到Stack Overflow上有用户遇到类似问题，通过为输入框添加value属性解决，但该方法对我无效。

SearchBar组件代码 #

import React from 'react'
import './SearchBar.css'

class SearchBar extends React.Component { 
  constructor(props){
    super(props);

    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
   }

   handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A value was submitted: ' + this.state.value);
    event.preventDefault();
  }

    render() {
      return (
        <div className='Container'>
          <form className='SearchBar' onSubmit={this.handleSubmit}>
            <input type="text" placeholder='Enter the link to your IMDB profile' value={this.state.value} onChange={this.handleChange} />
          </form>
        <p className='Warning'>Make sure your imdb profile is set to public!</p>
        </div>
      );
    }
  }

export default SearchBar

排查过程 #

按照Konrad的提示，单独运行该组件一切正常，说明问题出在集成环节。注释App.css文件后组件恢复正常，因此问题根源在该样式文件中。以下是App.css和App.js的代码：

App.css代码 #

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    height: 20vmin;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(20px + 2vmin);
  color: white;
}

.Wrapped{
  position:absolute;
  left: 40%; 
  height: 75%;
  font-size: 75px;
  transform: rotate(45deg);
  font-family: "Apple Chancery", cursive;
  color:deeppink
}


.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

App.js代码 #

import logo from './Logo_2016.png';
import './App.css';
import SearchBar from './components/SearchBar';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1 className='Wrapped'> Wrapped </h1>
        <img src={logo} className="App-logo" alt="logo" />
        <p> Welcome! </p>
        <SearchBar/>
      </header>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者McKinley