React TS 中的搜索栏未按预期工作

Question

我使用这个用 ReactJS 编写的示例 sn-p 来尝试在我的网站中创建一个搜索框，它是用 React TS 编写的

https://codemyui.com/input-highlight-seen-tripadvisor/

但是当我尝试转换它时，我遇到了以下问题

1) 输入是只读的，即我不能输入它

2) 我不确定如何处理原始 CSS 中的这部分样式，因为当我将其粘贴到我的 CSS 中时它无法编译

&:focus {
    + .input-highlight {
      border-top: 3px solid #fbc91b;
    }
  }

谁能指出我在转换为 TS 时做错了什么？

我的 React 控件

import * as React from 'react';
import './App.css';

interface ISearchBarState {
    inputValue : string
  }

class SearchBar extends React.Component<{}, ISearchBarState> {

    constructor(props: any) {
        super(props);

        this.state = {
          inputValue: ''
        };

        this.onInputChange = this.onInputChange.bind(this);
      }

      public render() {
        const { inputValue } = this.state;

       return (<div className='input-wrapper'>
           <input
             placeholder='Search...'
             value={inputValue}
             spellCheck={false}
             />
           <span className='input-highlight'>
           { inputValue.replace(/ /g, "\u00a0") }
         </span>  
         </div>);          
    }

    private onInputChange(e: any) {
        const { value } = e.target;

        this.setState({
          inputValue: value
        });
      }


}

export default SearchBar;

和我的 CSS

.input-wrapper {
  position: relative;
  width: 350px;
  margin-left: 5px;
}

.input-highlight {
  font-size: 16;
  user-select: none;
  line-height: 20;
  border-top: 1px solid white;
  position: absolute;
  left: 0;
  bottom: 0;
  color: #999999;
  max-width: 100%;
  height: 0;
  color: transparent;
  font-family: Roboto Slab, sans-serif;
  overflow: hidden;
  border-top: 3px solid #fbc91b;
}

input {
  height: 30px;
  width: 100%;
  min-width: 100%;
  padding: 0;
  border-radius: 0;
  line-height: 2;
  background-color: transparent;
  color: #999999;
  font-size: 16;
  border: none;
  outline: none;
  border-bottom: 1px solid #666666;
  font-family: Roboto Slab, sans-serif;
}

Answer 1

看起来有点像有问题的css

&:focus {
+ .input-highlight {
    border-top: 3px solid #fbc91b;
  }
}

实际上是scss，你需要先把那个位编译成css或者手动编译成css。这里，下面我帮你手动改成css给你

input:focus .input-highlight{
   border-top: 3px solid #fbc91b;
}

您可以将此 css sn-p 添加到您的 css 文件中，将其放在输入 css 块下方。