为了账号安全,请及时绑定邮箱和手机立即绑定

react 父子传值,子组件修改父组件的state数据

2018.11.23 13:46 11218浏览
Web前端架构师
点击查看
¥6680.00 4820.00 (历史最低价,仅限618活动期间)

话不多说直接来看代码吧,这次做的是个简单的增删功能,父组件在input输入框内输入的内容点击提交时要通过子组件作为列表展示在下方,点击任一项则删除相应列表项

       https://img3.sycdn.imooc.com/5bf79de0000132f403870126.jpg      

index.js,作为入口文件,先将父组件引进来

import React from 'react';
import ReactDom,{render} from 'react-dom';
import TodoList from './TodoList';//自己的组件,作为父组件
render(<TodoList />,window.root);

TodoList.js作为本次实例的父组件

1、实现父子传值,通过父组件引用子组件的时候通过属性的方式传递给子组件

import React,{Component,Fragement} from 'react';
import TodoItem from './TodoItem';//子组件
class TodoList extends Component{
  constructor(props){
    super(props);
    this.state={
      inputValue:"",
      list:[]
    }
  }
  render(){
    return(
    <Fragement>
      <input value={this.state.inputValue}
        onChange={(e)=>{
          this.setState({
            inputValue = e.target.value
          })
        }}
      />
      <button onClick={()=>{
        this.setState({
          list:[...this.state.list,this.state.inputValue]
        })
      }}>提交</button>
      <ul>
        {
          this.state.list.map((item,index)=>{
            return(
              <TodoItem
                content = {item}
                index = {index}
                
              />
            )
          })
        }
      </ul>
    </Fragement>
    )
  }
}
export default TodoList;

TodoItem.js作为子组件,父组件已经将content和index传过来,子组件需要接收并展示,子组件通过this.props.属性名进行接收

import React from 'react';
class TodoItem extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <li>{this.props.content}</li>
    )
  }
}

2、通过子组件修改父组件的值

父组件 TodoList.js

import React,{Component,Fragement} from 'react';
import TodoItem from './TodoItem';
class TodoList extends Component{
  constructor(props){
    super(props);
    this.state = {
      inputValue = "",
      list:[]
      }
  }
  render(){
    return(
      <Fragement>
        <input value = {this.state.inputValue} onChange={(e)=>{
          this.setState({
            inputValue : e.target.value
          })
        }}/>
        <button onClick={()=>{
          this.setState({
            list:[...this.state.list,this.state.inputValue]
          })
        }}>提交</button>
        <ul>
          {
            this.state.list.map((item,index)=>{
              <TodoItem
                content = {item}
                index = {index}
                deleItem = {this.deleItemClick.bind(this)}
              />
            })
          }
        <ul>
      </Fragement>
    )
  }
  //删除列表项内容的具体逻辑,通过属性传递给子组件,注意需要将函数的this始终指向父组件
  deleItemClick(index){
    let list = [...this.state.list];
    list.splice(index,1);
    this.setState({
      list:list
    })
  }
}
export default TodoList

子组件TodoItem.js

import React,{Component} from 'react';
class TodoItem extends Component{
  constructor(props){
    super(props);
  render(){
    return(
      <li onClick={()=>(this.props.deleItem(this.props.index))
        {this.props.content}
      <li>
    )
  }


点击查看更多内容

本文首次发布于慕课网 ,转载请注明出处,谢谢合作

4人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
Web前端工程师
手记
粉丝
27
获赞与收藏
159

关注TA,一起探索更多经验知识

作者相关文章
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消