React开发中如何根据Slider选择值动态渲染对应列表项？

修改逻辑说明 #

• 新增滑块值状态绑定，监听滑块变化事件
• 建立滑块取值与dataJobParams预设配置的映射关系
• 滑块值变化时自动将对应预设配置转换为列表组件适配的数据格式，更新列表数据

核心代码修改（App.js） #

import React from "react";
import Switch from "@material-ui/core/Switch";
import Slider from "@material-ui/core/Slider";

import { dataJobParams } from "./List/dataJobParams";

import "./styles.css";

import List from "./List/List";

const App = () => {
  const [checkSwitch, setCheckSwitch] = React.useState(false);
  // 新增滑块值状态
  const [sliderValue, setSliderValue] = React.useState(0);
  const [data, setData] = React.useState([
    [
      {
        label: "Name",
        value: "",
        name: "00"
      },
      {
        label: "Last Name",
        value: "",
        name: "01"
      }
    ]
  ]);

  // 滑块值与预设配置的映射关系
  const sliderToParamKey = {
    0: 'small_data_load',
    33: 'medium_data_load',
    66: 'large_data_load',
    100: 'extra_large_data_load'
  }

  const handleOnChange = (e, row, col) => {
    const newData = data.map((d, i) => {
      if (i === row) {
        d[col].value = e.target.value;
      }

      return d;
    });
    setData(newData);
  };

  const addRow = () => {
    setData([
      ...data,
      [
        {
          label: "Name",
          value: "",
          name: `${data.length}0`
        },
        {
          label: "Last Name",
          value: "",
          name: `${data.length}1`
        }
      ]
    ]);
  };

  const removeRow = (index) => {
    const _data = [...data];
    _data.splice(index, 1);
    setData(_data);
  };

  // 滑块变化处理函数
  const handleSliderChange = (e, newValue) => {
    setSliderValue(newValue);
    const targetParamList = dataJobParams[sliderToParamKey[newValue]];
    // 转换为列表组件适配的数据格式
    const formattedData = targetParamList.map((param, idx) => [
      {
        label: "Name",
        value: param.key || "",
        name: `${idx}0`
      },
      {
        label: "Last Name",
        value: param.val || "",
        name: `${idx}1`
      }
    ])
    setData(formattedData);
  }

  const marks = [
    {
      value: 0,
      label: "Small"
    },
    {
      value: 33,
      label: "Medium"
    },
    {
      value: 66,
      label: "Large"
    },
    {
      value: 100,
      label: "Extra Large"
    }
  ];

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div className="header">
        <div className="switch">
          <Switch
            isChecked={checkSwitch}
            onChange={(e) => setCheckSwitch(e.target.checked)}
          />
          <span>Params</span>
        </div>
        <div className="slider">
          {/* 绑定滑块值与变化事件 */}
          <Slider 
            disabled={checkSwitch} 
            step={33} 
            marks={marks}
            value={sliderValue}
            onChange={handleSliderChange}
          />
        </div>
      </div>
      <List
        data={data}
        addRow={addRow}
        removeRow={removeRow}
        handleOnChange={handleOnChange}
      />
    </div>
  );
};

export default App;

修改完成后切换滑块就会自动加载对应档位对应的预设参数列表，开关打开后滑块禁用，可手动增删改列表内容。

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