React组件拆分与传值

前端之家收集整理的这篇文章主要介绍了React组件拆分与传值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

组件拆分与组件之间的传值

父子组件的概念:

父组件通过属性的方式,向自组件传值

子组件通过this.props的属性,接收传递过来的值

 

父组件

src/TodoList.js

@H_502_17@import React,{Component,Fragment} from 'react'; import TodoItem from './TodoItem'; import './style.css'; class TodoList extends Component { constructor(props) { super(props); this.state = { inputVal:'',list:[] }; this.changeVal=this.changeVal.bind(this); this.addItem=this.addItem.bind(this.deleteItem=this.deleteItem.bind(); } changeVal(e){ .setState({ inputVal: e.target.value }); } addItem(e){ //按下回车键 if(e.keyCode===13 && e.target.value!==""){ const list=[....state.list,e.target.value] .setState({ list:list 对象的键值相同时,简写 list,inputVal:'' }) } } deleteItem(index){ const list=[....state.list]; list.splice(index,1);从数组中删除指定index的数据 .setState({ list }) } getList(){ return this.state.list.map((item,index)=>{ return ( <TodoItem item={item} key={index} index={index} deleteItem={.deleteItem} /> ) }) } render(){ 这是JS中的注释 ( <Fragment> {/* 这是JSX中的注释 */} <label htmlFor="input">请输入内容:</label> <input type="text" id="input" className="input" value={.state.inputVal} onChange={.changeVal} onKeyUp={.addItem} /> <ul>{this.getList()}</ul> </Fragment> ); } } export default TodoList;

 

自组件 TodoItem.js

@H_502_17@import React,{Component} from 'react'; class TodoItem extends Component{ constructor(props){ super(props); ); } deleteItem(){ 调用父组件传递过来的方法 this.props.deleteItem(this.props.index); 解构赋值写法 const {deleteItem,index}=.props; deleteItem(index); } render(){ return <li key={this.props.index} onClick={this.deleteItem}>{this.props.item}</li> } } export default TodoItem;

 

效果

 

猜你在找的React相关文章