欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React小白爬坑笔记(四):来点儿css

程序员文章站 2022-07-14 20:23:20
...

在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)}
/>