React TS搜索栏异常：输入无法编辑及CSS编译问题求助

嘿，我帮你排查了下把React JS搜索框转成TS时遇到的两个问题，都是常见的小坑，一起来看看：

问题1：输入框处于只读状态，无法输入内容 #

错误原因 #

你的输入框是受控组件（通过value={inputValue}绑定了组件state），但你忘记给<input>标签添加onChange事件绑定。没有这个绑定的话，用户输入的内容无法同步更新到组件state里，输入框的值自然就没法修改了。

修复方法 #

在<input>标签上添加onChange={this.onInputChange}属性，把输入事件和你定义的处理方法关联起来：

<input 
  placeholder='Search...' 
  value={inputValue} 
  spellCheck={false}
  onChange={this.onInputChange} // 新增这一行
/>

另外，为了符合TypeScript的类型规范，建议把onInputChange的参数类型从any改成更精确的React.ChangeEvent<HTMLInputElement>：

private onInputChange(e: React.ChangeEvent<HTMLInputElement>) {
  const { value } = e.target;
  this.setState({ inputValue: value });
}

问题2：原CSS代码片段无法编译 #

错误原因 #

1. 你粘贴的CSS片段里的&:focus是HTML转义后的字符，普通CSS里不能这么写。正确的选择器应该是input:focus + .input-highlight（如果用Sass/Scss的话，在父选择器下可以用&:focus + .input-highlight，但普通CSS需要明确写出input）。
2. 你的CSS代码里还有语法错误：font-size: 16和line-height: 20缺少单位（应该是px）；.input-highlight重复定义了border-top属性，会导致样式冲突。

修复后的完整CSS代码 #

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

.input-highlight {
  font-size: 16px; /* 补充px单位 */
  user-select: none;
  line-height: 20px; /* 补充px单位 */
  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;
}

/* 正确的:focus相邻选择器写法 */
input:focus + .input-highlight {
  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: 16px; /* 补充px单位 */
  border: none;
  outline: none;
  border-bottom: 1px solid #666666;
  font-family: Roboto Slab, sans-serif;
}

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