React初学笔记。做一个ul.增加li功能

import React from "react";

class TodoList extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			list: [],
		}
	}
	//数据变化时，react会重新加载render函数
	buttonClick() { 
		// this.state.list.push('learn 11111');
		this.setState({
			list: [...this.state.list, 'learn  111111'],
		});
	}

	//jsx 语法 只能写表达式不能写语句
	render () {
		return (
			<div>
				<div>
					<input/>
					{/* this指向问题。button的this本身只指向<button;  .bind(this)把this指向绑到了页面上 */}
					<button onClick={this.buttonClick.bind(this)}>add</button>
				</div>
				<ul>
					{
						this.state.list.map((item, index) => {
							return <li key={index}>{item}</li>
						})
					}
				</ul>
			</div>
		)
	} 
}
export default TodoList;