React小白爬坑笔记（四）：来点儿css

在js里面嵌入css，怎么想都好奇怪啊…

1.public/下新建一个css文件，随便写点啥：

比如给input加个背景色：

.input {
    background-color: antiquewhite;
}

2.TodoList.js中导入，并且给input说明一下

（注意这里推荐用className而不是class，后者会警告，因为和外面的input标签重名了）。

import './style.css'
<input
    className = 'input'
    value={this.state.inputValue}
    onChange={this.handleInputChange.bind(this)}
/>

3. 保留转义

默认情况下是不转义地设置页面内容，保护网页不被css攻击。（比如输入<h1>xxxx</h1>显示的就是<h1>xxxx</h1>)，但是如果有需要这样显示:

xxxx

可以用dangerouslySetInnerHTML属性。

return <li
    key={index}
    onClick={this.handleItemDelete.bind(this,index)}
    dangerouslySetInnerHTML={{__html:item}}
>
{/*{item}*/}
</li>

4.在输入框前面增加一个解释标签，使用htmlFor属性帮助聚焦到input元素

<label htmlFor="insertArea">input there</label>
  {/*扩大点击的区域,for属性帮助聚焦到input*/}
<input
    id="insertArea"
    className = 'input'
    value={this.state.inputValue}
    onChange={this.handleInputChange.bind(this)}
/>