ReactJS中点击子滑块元素时如何更新父滑块数值

核心需求 #

• 包含3个父滑块组件
• 每个父滑块内配置4个不同的子数值选项
• 点击子滑块选项后，父滑块的数值同步更新为所选子数值

效果示例 #

• 初始状态：父滑块显示默认值1.1
• 子滑块可选值：1.1、1.2、1.3、1.4
• 操作后：点击子滑块的1.3，父滑块更新为1.3

当前实现代码 #

import "./styles.css";
import React, { Component } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import {
  Box,
  ImageList,
  ImageListItem,
  Stack,
  Typography
} from "@mui/material";
import { hero } from "./data";

const settings = {
  dots: true,
  lazyLoad: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  initialSlide: 1
};

export default class App extends Component {
  state = {
    nav1: null,
    nav2: null
  };

  componentDidMount() {
    this.setState({
      nav1: this.slider1,
      nav2: this.slider2
    });
  }
  render() {
    return (
      <Slider
        asNavFor={this.state.nav2}
        ref={(slider) => (this.slider1 = slider)}
        {...settings}
      >
        {hero.map((item) => (
          <Box
            key={item}
            maxWidth="sm"
            sx={{ margin: "0 auto !important", display: "block !important" }}
          >
            <Stack direction="row" justifyContent="center">
              <Box flex={1} alignSelf="center">
                <Typography variant="h3" fontWeight="700">
                  {item.title}
                </Typography>
                <Typography variant="subtitle1">{item.description}</Typography>
                <Typography variant="h6">{item.price} Taka</Typography>
                <Box>
                  <ImageList>
                    <Slider
                      slidesToShow={4}
                      asNavFor={this.state.nav1}
                      ref={(slider) => (this.slider2 = slider)}
                    >
                      {item.childImage.map((item) => (
                        <ImageListItem key={item}>
                          <Typography>{item}</Typography>
                        </ImageListItem>
                      ))}
                    </Slider>
                  </ImageList>
                </Box>
              </Box>
              <Box flex={1}>
                <Typography variant="h1">{item.parentImage}</Typography>
              </Box>
            </Stack>
          </Box>
        ))}
      </Slider>
    );
  }
}

内容的提问来源于stack exchange，提问作者mrhrifat