Question

我使用在ReactJS中编写的这个示例代码段来尝试在我的网站中创建一个搜索框，该搜索框是用React TS编写的

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

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

1）输入是只读的，即我无法输入

2）我不知道如何处理原始CSS中的这个样式，因为当我将它粘贴到我的CSS时它不能编译

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

有人可以指出我在转换为TS时做错了吗？

我的反应控制

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

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

实际上是，您需要先将该位编译为css或手动将其编译为css。在这里，我帮助手动将其更改为css给你

{{1}}

你可以将这个css片段添加到你的css文件中，把它放在输入的css块下面。

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

1 个答案: