如何根据子输入值和输入数据集比较更改特定元素的类名？答案

【问题标题】：How to change a className of a particular element based off it's child input value and input dataset comparison?如何根据子输入值和输入数据集比较更改特定元素的类名？
【发布时间】：2022-01-16 14:08:24
【问题描述】：

这是我第一次发帖 - 大家好！

我正在制作一个可以帮助我记住地理数据的应用程序。

我有一张带有标记的地图，当我点击这些标记中的任何一个时，会出现一个弹出窗口，其中我有一个输入。我正在将输入值与输入数据集进行比较，以查看我的答案是否正确。问题是，一旦我的答案正确，我还想将标记 (ImageOverlay) 的颜色更改为绿色，如果答案错误则更改为红色（只要出现任何值）。 p>

我遇到的主要问题是这些标记是从从 firebase 获取的对象映射的，这意味着每个输入都必须更改相应标记的颜色并且仅更改该标记。

我希望我解释清楚了。提前非常感谢您！

从 firebase 文档映射数据的 displayPins：

 const displayPins = doc.map((d) => {
return (
  <ImageOverlay
    className="img-overlay"
    key={d.id}
    bounds={[
      [d.latitude - 2, d.longitude - 2],
      [d.latitude + 2, d.longitude + 2],
    ]}
    interactive={true}
    url={`./${d.shape}`}
  >
    <Popup>
      <input type="text" data-tag={d.name} onChange={valueCompare}></input>
      <button
        onClick={() => {
          console.log(test);
        }}
      ></button>
    </Popup>
  </ImageOverlay>
);});

Input 的 onChange：

const valueCompare = (e) => {
const data = e.target.dataset.tag;
const value = e.target.value;
if (data != value) {
  console.log("WRONG");
} else {
  console.log("CORRECT");
}};

CSS

.img-overlay {
  filter: brightness(0) saturate(100%);
}
.img-overlay-wrong {
  filter: invert(10%) sepia(95%) saturate(7496%) hue-rotate(11deg)
    brightness(97%) contrast(120%);
}
.img-overlay-correct {
  filter: invert(69%) sepia(61%) saturate(4725%) hue-rotate(78deg)
    brightness(112%) contrast(128%);
}

【问题讨论】：

你能提供一个带有模拟数据的演示吗？
请提供足够的代码，以便其他人更好地理解或重现问题。

标签： javascript reactjs leaflet

【解决方案1】：

您需要一些额外的状态来存储测验结果并相应地设置 ImageOverlays 的样式。

对当前代码的最小更改可能在于拥有一个额外的状态字典：

function MapContent({ doc }) {
  // State to store results
  // { id: true or false (quizz result for doc id) }
  const [resultsDictionary, setResults] = useState({});

  function result2class(id) {
    if (id in resultsDictionary) {
      return resultsDictionary[id] ? "img-overlay-correct" : "img-overlay-wrong";
    } else {
      return "img-overlay";
    }
  }

  const valueCompare = (e, id) => {
    const data = e.target.dataset.tag;
    const value = e.target.value;
    let result;
    if (data != value) {
      console.log("WRONG");
      result = false;
    } else {
      console.log("CORRECT");
      result = true;
    }
    // Shallow clone to force React to see a change
    setResults({
      ...resultsDictionary,
      [id]: result, // new result
    });
  };

  return (<>
    {doc.map((d) => (
      <ImageOverlay
    className={result2class(d.id)}
    key={d.id}
    bounds={[
      [d.latitude - 2, d.longitude - 2],
      [d.latitude + 2, d.longitude + 2],
    ]}
    interactive={true}
    url={`./${d.shape}`}
  >
    <Popup>
      <input type="text" data-tag={d.name} onChange={(e) => valueCompare(e, d.id)}></input>
      <button
        onClick={() => {
          console.log(test);
        }}
      ></button>
    </Popup>
  </ImageOverlay>
    ))}
  </>);
}

【讨论】：