星尘

7. class +注释+不转义+htmlFor

发表于 更新于 分类于

添加class

使用className，因为class和定义类的class重名。

添加注释

  1. 单行注释使用

    1
    //

  2. 多行注释使用j

    1
    2
    3
    4
    5
    {
    	/*
    	添加class
    	*/
    }

不解析html标签

1
dangerouslySetInnerHTML={{__html:value}}

label htmlFor

1
<label htmlFor='inputArea'>请输入内容</label>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React, { Component, Fragment } from 'react';
import './style.css'

class TodoList extends Component {

  constructor(props){
    super(props);
    this.state = {  
      inputValue: 'hello',
      list:['111', '222']
    }
  }

  render () {
    return (
        <Fragment> 
          {/* htmlFor */}
          <label htmlFor='inputArea'>请输入内容</label>
          <input 
            id='inputArea'
            // 添加class
            className='input'
            value={ this.state.inputValue }    
            onChange={ this.onChangeHandler.bind(this) } 
          /> 
          <button onClick={ this.handleBtnClick.bind(this) }>提交</button>
        	<ul>
          		{
                this.state.list.map((value, index) =>{ 
                    return <li 
                              key={ index } 
                              onClick={ this.handleBtnDeleteClick.bind(this, index) }
                              // 不转义html标签，渲染出原始内容
                              dangerouslySetInnerHTML={{__html:value}}
                              >
                          </li>
                })
              }
        	</ul>
        </Fragment>
      )
  }

  onChangeHandler(e){
    console.log(e.target.value)  
    this.setState({              
      inputValue: e.target.value 
    })
  }

  handleBtnClick(){
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  handleBtnDeleteClick(e){
    console.log(e)
    const list = [...this.state.list]
    list.splice(e, 1)
    this.setState({
      list:list
    })
  }
}

export default TodoList;

完整代码