[React] 8.React -给页面添加样式 && for 语法

一、要实现给input框的border加颜色

1. 新建一个style.css: 添加样式input
   

.input {
    border: 4px solid green;
}

2. 将样式引入html:

import './style.css'

3. 给Input框添加样式：

<input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} onKeyUp={this.handleKeyUp.bind(this)} className = 'input'/>

完整代码如下：
TodoList中：

import React, {Component, Fragment} from 'react';
import './style.css'

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '',
            list: []
        }
    }
    handleInputChange(e) {
        this.setState({
            inputValue: e.target.value
        })
    }

    // 松开键盘会触发该事件
    handleKeyUp(e) {
        // 判断是不是点的回车键
        if (e.keyCode === 13) {
            const list = [...this.state.list, this.state.inputValue];
            this.setState({
                list: list,
                inputValue: ''
            })
        }
    }

    // 列表点击事件
    handleItemClick(index) {
        const list = [...this.state.list];
        list.splice(index, 1);
        this.setState({
            list: list
        })
    }

    render() {
        return(
            <Fragment>
            <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} onKeyUp={this.handleKeyUp.bind(this)} className = 'input'/>
            <ul>
                {
                    this.state.list.map((value,index) => {
                        return (
                        <li key= {index} onClick={this.handleItemClick.bind(this, index)}>{value}</li>

                        )
                    })
                }
            </ul>
            </Fragment>
                
        )
    }
}

export default TodoList;

style.css中：

.input {
    border: 4px solid green;
}

二、点label之后聚焦到input框中：用到htmlFor

1. label 上添加htmlFor属性：

<label htmlFor='myInput'>请输入内容：</label>

2. 给Input添加id

 <input id='myInput' value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} onKeyUp={this.handleKeyUp.bind(this)} className = 'input'/>

3. 实现效果如下：点击文字会聚焦到input框

三、输出带样式的文本：
如输出h1样式的文本www

1. 未实现之前效果如下：
   
2. 实现之后效果如下：
   
3. 将li标签做如下修改：加dangerouslySetInnerHTML

<li key= {index} onClick={this.handleItemClick.bind(this, index)} dangerouslySetInnerHTML = {{__html: value}}></li>

完整代码如下：

import React, {Component, Fragment} from 'react';
import './style.css'

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '',
            list: []
        }
    }
    handleInputChange(e) {
        this.setState({
            inputValue: e.target.value
        })
    }

    // 松开键盘会触发该事件
    handleKeyUp(e) {
        // 判断是不是点的回车键
        if (e.keyCode === 13 && e.target.value !== '') {
            const list = [...this.state.list, this.state.inputValue];
            this.setState({
                list: list,
                inputValue: ''
            })
        }
    }

    // 列表点击事件
    handleItemClick(index) {
        const list = [...this.state.list];
        list.splice(index, 1);
        this.setState({
            list: list
        })
    }

    render() {
        return(
            <Fragment>
            <label htmlFor='myInput'>请输入内容：</label> 
            <input id='myInput' value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} onKeyUp={this.handleKeyUp.bind(this)} className = 'input'/>
            <ul>
                {
                    this.state.list.map((value,index) => {
                        return (
                        <li key= {index} onClick={this.handleItemClick.bind(this, index)} dangerouslySetInnerHTML = {{__html: value}}></li>
                        )
                    })
                }
            </ul>
            </Fragment>
                
        )
    }
}

export default TodoList;