3.react组件todolist实例

import React, { Component, Fragment } from 'react';

// import style from './style.css'

 

// import React from 'react'

// const Component = React.Component

 

class Todolist extends Component {

constructor(props) {

super(props);

this.state = {

inputValue: '',

list: []

}

}

 

handleOnChange(e) {

// console.log("事件目标对象", e.target.value)

// console.log("todolist组建对象",this)

this.setState({

inputValue: e.target.value,

})

}

 

handleSubmit() {

// console.log(this.state.list)

let todo = this.state.inputValue

//本方法时向数组最后添加元素并返回数组长度

// this.state.list.push(todo);

//用展开运算符 解构赋值

this.setState({

list: [...this.state.list, todo],

inputValue: ''

})

 

}

 

handleItemDelete(index) {

console.log(index);

//删除index下标的元素，删除1个 不写则删除后面所有 0则是不删除

// immutable 不直接修改state里面的值 react 不提倡

// this.state.list.splice(index,1);

// this.setState({

// list: [...this.state.list],

// })

const list = [...this.state.list]

list.splice(index, 1)

this.setState({

list,

})

}

 

 

 

render() {

return (

<Fragment>

<div>

{/*

花括号里面js代码 里面注释就可以安装js的注释方式 注意单行要单独一行 //

*/}

<label htmlFor="insertContent">输入内容:</label>

<input

id="insertContent"

//全局样式不需要引入

className='input'

type="text" value={this.state.inputValue}

// onChange={this.handleOnChange} /> this为undefined 但是会触发handleOnChange

// onChange={this.handleOnChange.bind(this)} /> 可以这样绑定

// onChange={(e) =>this.handleOnChange(e)} /> 用箭头函数 自动绑定

onChange={e => this.handleOnChange(e)} />

<button

// onClick={this.handleSubmit()} 只页面渲染调用方法

onClick={() => this.handleSubmit()}

>提交</button>

</div>

<ul>

{/* 用index 做key 不是很好？ */}

{this.state.list && this.state.list.map((item, index) => {

console.log(item, index, 66)

return <li key={index} //为什么不能用箭头函数传参？

onClick={this.handleItemDelete.bind(this, index)}

//js显示html标签不需转义时 直接显示标签内容 注意两个下划线_

dangerouslySetInnerHTML={{ __html: item }}

// >{item}</li>

></li>

})}

</ul>

</Fragment>

);

}

}

// registerServiceWorker();

export default Todolist