react 部分语法补充

jsx语法

todolist.js

import React, { Component,Fragment } from 'react';
import './style.css'
class Todolist extends Component {
    constructor(props) { //最优先执行的函数
        super(props);
        this.state={
            inputValue:'',
            list:[]
        }
    }
    render() {
        return (
            <Fragment>
                <div>
                    {/*这是一个todolist*/}
                    <label htmlFor='insertArea'>输入内容</label>
                    <input
                        id="insertArea"
                        className='input'
                        value={this.state.inputValue}
                        onChange={this.handleinputChange.bind(this)}
                    />
                    <button onClick={this.handlebuttonClick.bind(this)}> 提交 </button>
                </div>
                <ul>
                    {
                        // 这是一个list
                    }
                    {
                        this.state.list.map((item,index)=>{
                            return(
                                <li
                                    key={index}
                                    onClick={this.handleItemdelt.bind(this,index)}
                                    dangerouslySetInnerHTML={{__html:item}}
                                >
                                </li>
                                )
                        })
                    }
                </ul>
            </Fragment>
        );
    }
    handleinputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    handlebuttonClick(e){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
    }
    handleItemdelt(index){
        // immutable
        // state 不允许我们坐任何的改变
        const list=[...this.state.list];   // list的一个副本
        list.splice(index,1);
        this.setState({
            list:list
        })
    }
}
export default Todolist;

1.以大写字母的是组件

2.注释　　{/*这是jsx的注释*/}　　　　

　　　　{

　　　　　　// 这是一个list

　　　　}

3.引用class import ‘./xxx.css’

4.class必须用className

5.dangerouslySetInnerHTMl某些标签不被转义

5.label中for 要使用hmtlFor