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