bugfix> javascript > 投稿

ReactJSで書かれたこのサンプルスニペットを使用して、React TSで書かれたWebサイトに検索ボックスを作成しようとしました。

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

回答 1 件
  • 問題のCSSのビットのように見えます

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

    実際にはscssであるため、最初にそのビットをcssにコンパイルするか、手動でcssにコンパイルする必要があります。ここでは、以下のように手動でCSSに変更するのに役立ちます

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

    このcssスニペットをcssファイルに追加して、入力cssブロックの下に置くことができます。

あなたの答え