如何创建一个子组件呢?
-
首先需要创建一个recat文件(这里我创建的是TodoItem.js),然后在这个文件中引入react,最后import default出去
import React,{ Component } from 'react'; class TodoItem extends Component{ render() { return "123" } } export default TodoItem;
-
然后在父组件中(这里父组件是TodoList)引入地址,在需要使用组件的地方使用即可。
//在头部引入地址 import TodoItem from "./TodoItem"; //在需要的地方引入组件 <TodoItem></TodoItem>
父组件如何向子组件传值呢?
父组件向子组件传值一般使用属性的方式,子组件通过this.props.属性接收
//通过属性content传值
<TodoItem content={item}></TodoItem>
//然后使用this.props.属性接收
<li>{this.props.content}</li>
子组件如何向父组件传值呢?
其实是一样的也是通过属性将方法传递给子组件,子组件接收。
//因为子组件中没有handleClickDelet这个方法,所以父组件传递过去的事件强制让this指向父组件
<TodoItem content={item} index={index} TodoItemDelet={this.handleClickDelet.bind(this)}></TodoItem>
//子组件中使用this.props.方法去接收
this.props.TodoItemDelet(this.props.index)
完整代码
父组件
// 若要使用fragmen首先需要在这里引入
import React,{ Component,Fragment } from 'react';
import TodoItem from "./TodoItem";
class TodoList extends Component {
//constructor中设置state的数据结构
constructor(props) {
super(props);
this.state = {
inputValue:'', //input中的默认值
list:[] //列表项的默认值
}
}
render() {
return (
//使用Fragment不会被显示
<Fragment>
{/*获取input的默认值,并且监听input的值*/}
<input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
{/*点击按钮执行增加*/}
<button onClick={this.handleClick.bind(this)}>按钮</button>
<ul>
{
//将list中的数据循环出来
this.state.list.map((item,index)=>{
return <TodoItem content={item} index={index} TodoItemDelet={this.handleClickDelet.bind(this)}></TodoItem>
})
}
</ul>
</Fragment>
)
}
//监听input值的变化
handleInputChange(e){
this.setState({
inputValue:e.target.value
})
}
//点击更改数据
handleClick(){
this.setState({
//。。。是es6中的展开运算符,以下意思是,将list原来的数据跟换成inputValue监听的值,并且将inputValue设置为空
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
//点击删除对应下标的值
handleClickDelet(index){
//首先需要展开list
const list = [...this.state.list];
//删除点击下标的值
list.splice(index,1);
this.setState({
//更改state中的数据
list:list
})
}
}
export default TodoList;
子组件
import React,{ Component } from 'react';
class TodoItem extends Component{
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
render() {
return <li onClick={this.handleClick}>{this.props.content}</li>
}
handleClick(index){
this.props.TodoItemDelet(this.props.index)
}
}
export default TodoItem;
写博客的第三天,可能写得不太好,如果有什么问题,大家可以指出来哦,谢谢大家阅读~~