React—todolist
React—todolist
父组件
import React from 'react';
import ReactDom from 'react-dom';
import Header from './component/header'
import List from './component/list'
let arr = []; // 定义一个空数组用来储存每次输入的内容
class ToDoList extends React.Component {
constructor () {
super ();
this.state = {
msg: '' // 定义一个空变量,用来储存输入的内容
}
}
// 以下三个方法都父组件定义,在子组件中调用
handleChange (e) { // input框输入内容更新msg
this.setState ({
msg: e.target.value
})
}
handleClick () { // 点击确认发送
if (this.state.msg != '') { // 如果输入框内容不为空
arr.push(this.state.msg); // 数组添加输入框的内容
this.setState ({ // 清空输入框
msg: ''
})
}
}
handleKeyDown (e) { // 回车发送
if (e.keyCode == 13) { // 如果keycode是13证明是回车键
this.handleClick() // 直接调用点击确认发送的方法
}
}
render () {
return (
<div>
{/*
msg={this.state.msg}给子组件传值
handleChange={this.handleChange.bind(this)}
handleClick={this.handleClick.bind(this)}
handleKeyDown={this.handleKeyDown.bind(this)}
给子组件传方法
*/}
<Header
msg={this.state.msg}
handleChange={this.handleChange.bind(this)}
handleClick={this.handleClick.bind(this)}
handleKeyDown={this.handleKeyDown.bind(this)}
/>
{/*给List子组件传arr数组的值*/}
<List arr={arr}/>
</div>
)
}
}
ReactDom.render(
<ToDoList />,
document.getElementById('root')
);
子组件(header)
```bash
import React, {Component} from 'react';
export default class Header extends Component {
render () {
return (
<div>
{/*
value={this.props.msg}子组件中input的value值是获取父组件传过来的msg值
onKeyDown={this.props.handleKeyDown}子组件按键时触发父组件定义的handleKeyDown方法
onChange={this.props.handleChange}子组件的input输入框发生变化时触发父组件定义的handleChange方法
*/}
<input
type="text"
value={this.props.msg}
onKeyDown={this.props.handleKeyDown}
onChange={this.props.handleChange}
/>
{/*子组件点击按钮触发父组件的handleClick方法*/}
<button onClick={this.props.handleClick}>发送</button>
</div>
)
}
}
子组件(list
```bash
import React, {Component} from 'react';
export default class List extends Component {
render () {
// this.props.arr是子组件获取的父组件传过来的数组
// 然后利用map循环数组创建li
const listItems = this.props.arr.map((item, i) =>
<li key={i}>{item}</li>
)
return (
<div>
<ul>
{listItems}
</ul>
</div>
)
}
}
效果