重点
- 1、export import 成对出现,有导出才能导入
- 2、this.setState({}) 用于改变数据
- 3、父向子组件传值:
以属性绑定方式,子组件中用 this.props 接收使用 - 4、子组件向父组件传值:
父元素绑定属性是一个函数,子组件一属性方式接收,调用父组件函数来传值 - 5、组件名首字母大写
- 6、li中最好加上一个 key属性,key属性的值不能相同
- 7、尽量不要直接改变this.state的值,可以先定义一个值来接收,改变之后再重新赋值
index.js
import React from 'react';
import ReactDOM from 'react-dom';
// 组件 大写字母开头, .js后缀可省略
import TodoList from "./TodoList";
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<TodoList />, document.getElementById('root'));
TodoList.js
import React from 'react';
import TodoItem from './todoItem';
class TodoList extends React.Component{
constructor(props){
super(props);
this.state = {
'list':[],
'inputValue':''
}
{/* this指向,函数如果不绑定this,函数内部的this指向的是button,
所以需要绑定下this,bind(this)指的就是将目前的this绑定到这个函数,在constructor中更改this,就可以直接使用了 */}
this.handleClick = this.handleClick.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
this.handleDel = this.handleDel.bind(this)
}
handleClick(){
// 改变数据方法setState(),...放置老数据,逗号后添加新数据
this.setState({
list:[...this.state.list,this.state.inputValue],
// 顺带将输入框值清空
inputValue: ""
})
}
handleInputChange(e){
this.setState({
// 获取value e.target.value
inputValue:e.target.value
})
}
handleDel(index){
// 尽量不要直接去修改this.state的值,拷贝一个副本,达到性能更优
const list = [...this.state.list];
list.splice(index,1);
// this.setState({
// list:list
// })
//对象左边和右边值一样的时候可以简写
this.setState({list})
}
// li部分较多,可以单独用一个函数提出来
getTodoItems(){
return(
this.state.list.map((item,index)=>{
// content给子组件传值,以属性的方式传递,子组件接收父组件的值,使用props
// key父组件自用,不传递给子组件
return (
<TodoItem
handleDel = {this.handleDel}
key={index}
content={item}
index={index}
/>
)
})
)
}
render(){
return(
<div>
<div>
{/* value={this.state.inputValue} 绑定值到界面,主要用于清空的展示 */}
<input value={this.state.inputValue} type='text' onChange={this.handleInputChange}/>
<button onClick = {this.handleClick}>提交</button>
</div>
<ul>
{this.getTodoItems()}
</ul>
</div>
)
}
}
export default TodoList;
todoItem.js
import React from 'react';
class TodoItem extends React.Component{
// 子组件向父组件传值,要调用父组件传递过来的方法,给父组件传值
constructor(props){
super(props);
this.handleDel = this.handleDel.bind(this);
}
handleDel(){
this.props.handleDel(this.props.index)
}
render(){
// 定义对象常量来接收参数
const {content} = this.props;
return(
<li onClick={this.handleDel}>
{/* 通过props接收父组件传过来的值 */}
{content}
</li>
)
}
}
export default TodoItem;