Javascript 反应TS中的搜索栏未按预期工作

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

然而，当我试图转换它时，我遇到了以下问题

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的问题

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

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

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

---

您可以将此css片段添加到css文件中，将其放在输入css块下方。

好的，非常感谢。我仍然有第一个问题，但是，与控制不接受输入和似乎准备就绪我知道你是如何添加tsx文件到您的页面？这是一个反应页面吗？你把tsx代码传输到js包了吗？您是否查看了如何启动react web应用程序？是的，我使用带有TS选项脚本的create react应用程序来创建TS项目。我在文档中读到一些东西，如果你设置一个控件的值，那么它就变成只读的了——但我不太明白——因为你肯定希望能够将该值绑定到状态，并允许用户输入一些东西？啊，是的，我删除了输入控件中的一行，说value={inputValue}，现在它可以工作了。令人惊讶的是，这是在网上的原始片段中，而且似乎是可行的。可能是TS的问题？是的，输入中的

onChange

处理程序应该已经处理了输入值的状态更新。从理论上讲，

value={inputValue}

应该对它的添加或删除没有影响。如果删除该属性修复了问题，那么可以从代码中删除它！

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