从材质ui映射html元素并通过地图渲染的最佳方法

瓦科（Vakho Jgenti）

            <FormControlLabel
                control={
                    <Switch
                        onChange={(e) => changeSwitchState(e.target.name, e.target.checked)}
                        color='primary'
                        name='a'
                    />
                }
                label="A"
            />
            <FormControlLabel
                control={
                    <Switch
                        onChange={(e) => changeSwitchState(e.target.name, e.target.checked)}
                        color='primary'
                        name='b'
                    />
                }
                label="B"
            />
            <FormControlLabel
                control={
                    <Switch
                        onChange={(e) => changeSwitchState(e.target.name, e.target.checked)}
                        color='primary'
                        name='c'
                    />
                } label="C" />
            <span>D</span>
            <InputText
                className={inputValidation(inputValues.e, inputValues.f, inputValues.d) ? 'err' : 'validated'}
                id='d'
                keyfilter="num"
                value={inputValues.d}
                onChange={e => changeInputValue(e.target.id, e.target.value)}
            />
            <span>E</span>
            <InputText
                className={inputValidation(inputValues.f, inputValues.d, inputValues.e) ? 'errE' : 'validateE'}
                id='e'
                value={inputValues.e}
                onChange={e => changeInputValue(e.target.id, e.target.value)}
                mode="decimal"
                useGrouping={false}
            />
    )
};

这是我的代码，我想使代码更短，并通过地图方式呈现此输入和切换按钮，有人可以解释如何执行此操作以及什么是最佳实践，以及如何不丢失一个通过道具方式接收的数据吗？

甘扎尔

最好的方法是为此设置配置阵列。理想情况下，您希望将输入保持在React的“受控状态”，以便您的用户界面始终代表您的状态。

首先让我们配置一个常量，该常量保存formControlLabels的初始配置，该常量包含我可以从您提供的代码中读取的信息。

它可能看起来像这样，并且可以在使用它的组件之外定义。容纳每个输入的对象的数组是理想的，因为稍后我们要map在您的return方法中使用这些对象。

const formControlLabelConfig = [
  {
    color: "primary",
    name: "a",
    label: "A",
    state: false
  },
  {
    color: "primary",
    name: "b",
    label: "B",
    state: false
  },
  {
    color: "primary",
    name: "c",
    label: "C",
    state: false
  }
];

与您的textInput组件相似

const textInputConfig = [
  {
    keyFilter: "num",
    id: "d",
    mode: undefined,
    className: "err",
    errorClassName: "validated",
    useGrouping: undefined,
    value: ""
  },
  {
    keyFilter: "num",
    id: "e",
    mode: "decimal",
    className: "errE",
    errorClassName: "validateE",
    useGrouping: false,
    value: ""
  }
];

我们可以使用此初始配置来设置状态变量。这将在您用来呈现FormControlLabel和的功能组件内InputText components

const [formControlLabelState, setFormControlLabelState] = useState(formControlLabelConfig);
const [textInputConfig, setTextInputConfig] = useState(textInputConfig);

然后，我们可以使用map根据其配置渲染每个组件。我嘲笑了你最终会得到什么

import React, { useState } from "react";

const formControlLabelConfig = [
  {
    color: "primary",
    name: "a",
    label: "A",
    state: false
  },
  {
    color: "primary",
    name: "b",
    label: "B",
    state: false
  },
  {
    color: "primary",
    name: "c",
    label: "C",
    state: false
  }
];

const textInputConfig = [
  {
    keyFilter: "num",
    id: "d",
    mode: undefined,
    className: "err",
    errorClassName: "validated",
    useGrouping: undefined,
    value: ""
  },
  {
    keyFilter: "num",
    id: "e",
    mode: "decimal",
    className: "errE",
    errorClassName: "validateE",
    useGrouping: false,
    value: ""
  }
];

const SomeComponentName = () => {
  
  const [formControlLabelState, setFormControlLabelState] = useState(
    formControlLabelConfig
  );
  const [textInputState, setTextInputState] = useState(textInputConfig);

  const getInputClassName = () => {
    let className = "";
    //return the className on validation
    return className;
  };

  const changeInputValue = (id, value) => {
    setTextInputState((prevState) => {
      const newState = [...prevState];
      const index = newState.findIndex((config) => config.id === id);
      newState[index].value = value;
      return newState;
    });
  };

  const changeSwitchState = (name, chackedState) => {
    setFormControlLabelState((prevState) => {
      const newState = [...prevState];
      const index = newState.findIndex((config) => config.name === name);
      newState[index].state = chackedState;
      return newState;
    });
  };

  return (
    <>
      {formControlLabelState.map((config) => (
        <FormControlLabel
          key={config.id}
          control={
            <Switch
              onChange={(e) =>
                changeSwitchState(e.target.name, e.target.checked)
              }
              color={config.color}
              name={config.name}
              value={config.checked} //would need to check this. Not sure what attribute is used to set the checked state
            />
          }
          label="B"
        />
      ))}
      <span>D</span>
      {textInputState.map((config) => (
        <InputText
          key={config.id}
          className={() => getInputClassName(config.id)}
          id={config.id}
          value={config.value}
          onChange={(e) => changeInputValue(e.target.id, e.target.value)}
          mode={config.mode}
          useGrouping={config.useGrouping}
        />
      ))}
    </>
  );
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。