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