react--子组件更改父组件的值（状态）_react 修改子组件改父组件值

父组件把（一个事件函数）props传给子组件，然后子组件通过交互，触发这个事件（将想要改变的值传回）

父组件：

import React, { Component } from 'react'

import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
import FilterMore from '../FilterMore'
import styles from './index.module.css'
const titleSelectedStatus = {
  area: false,
  mode: false,
  price: false,
  more: false,
};
export default class Filter extends Component {
  state = {
    titleSelectedStatus,
  };
  onTitleClick = (type) => {
    console.log(this,type)
  }
  render() {
    const { titleSelectedStatus } = this.state;
    return (
      <div className={styles.root}>
        {/* 前三个菜单的遮罩层 */}
        {/* <div className={styles.mask} /> */}

        <div className={styles.content}>
          {/* 标题栏 */}
          <FilterTitle titleSelectedStatus={titleSelectedStatus} 
          onClick={this.onTitleClick} />

          {/* 前三个菜单对应的内容： */}
          {/* <FilterPicker /> */}

          {/* 最后一个菜单对应的内容： */}
          {/* <FilterMore /> */}
        </div>
      </div>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

子组件：

import React from "react";

import { Flex } from "antd-mobile";

import styles from "./index.module.css";
import Item from "antd-mobile/lib/popover/Item";

// 条件筛选栏标题数组：
const titleList = [
  { title: "区域", type: "area" },
  { title: "方式", type: "mode" },
  { title: "租金", type: "price" },
  { title: "筛选", type: "more" },
];

export default function FilterTitle({titleSelectedStatus,onClick}) {
  return (
    <Flex align="center" className={styles.root}>
      {titleList.map((item) => {
        const isSelected = titleSelectedStatus[item.type]
        return (
          <Flex.Item key={item.type} onClick={ () => onClick(item.type) }>
            {/* 选中类名： selected */}
            <span className={[styles.dropdown, isSelected ? styles.selected:''].join(" ")}>
              <span>{item.title}</span>
              <i className="iconfont icon-arrow" />
            </span>
          </Flex.Item>
        );
      })}
    </Flex>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34