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)}
/>
下一篇: apue读书笔记-Ch04