React 子组件向父组件传递

子组件向父组件传值

需求:当父组件中的counter 需要使用子组件中的点击事件累加

父组件 index.js 页面

import React, { Component } from "react";
import ChildButton from "./child";
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }
  render() {
    const { counter } = this.state;
    return (
      <div>
        <h2>当前计数:{counter}</h2>
        <button onClick={()=>this.btnClick()}>父组件 + 1</button>
        <hr/>
        <ChildButton changeBtnClick={()=>this.btnClick()}/>
      </div>
    );
  }
  //父组件事件
  btnClick() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
}

子组件 child.js页面

import React, { Component } from 'react'

export default class Child extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>
        <button onClick={()=> this.btn()}>子组件 + 1</button>
      </div>
    )
  }
  btn() {
    const {changeBtnClick} = this.props
    changeBtnClick()
  }
}

实际截图

image.png

综合案例:

App.js

import React, { Component } from "react";
import TabControl from "./TabControl";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      headerTitle: ["流行", "精选", "新款"],

      currentTitle: "流行",

      timeZoneIndex: 0,
    };
  }
  render() {
    const { headerTitle, currentTitle, listTable } = this.state;
    return (
      <div>
        <TabControl
          titles={headerTitle}
          itemChange={(index) => this.itemChange(index)}
        />
        <h1>{currentTitle}</h1>

      </div>
    );
  }
  itemChange(index) {
    this.setState(
      {
        currentTitle: this.state.headerTitle[index],
        timeZoneIndex: index,
      });
  }
}

子页面TabControl.js

import React, { Component } from "react";
import "./style.css";

export default class TabControl extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0,
    };
  }
  render() {
    const { titles } = this.props;
    const { currentIndex } = this.state;
    return (
      <div>
        <div className="content-box">
          {titles.map((item, index) => {
            return (
              <div
                key={index}
                className={
                  "content-box-item " + (currentIndex === index ? "active" : "")
                }
                onClick={() => this.itemClick(index)}
              >
                <span>{item}</span>
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  itemClick(index) {
    const { itemChange } = this.props;

    this.setState({
      currentIndex: index,
    });
    itemChange(index);
  }
}

css页面 style.css

.content-box {
  height: 45px;
  line-height: 45px;
  display: flex;
}
.content-box-item {
  flex: 1;
  text-align: center;
}

.content-box-item span {
  padding: 5px 8px;
}
.content-box-item.active {
  color: deeppink;
}

.content-box-item.active span {
  border-bottom: 3px solid deeppink;
}

实际截图

.content-box {
  height: 45px;
  line-height: 45px;
  display: flex;
}
.content-box-item {
  flex: 1;
  text-align: center;
}

.content-box-item span {
  padding: 5px 8px;
}
.content-box-item.active {
  color: deeppink;
}

.content-box-item.active span {
  border-bottom: 3px solid deeppink;
}