如何通过具有反应钩子的onClick动态更改样式？

debugcn 发表于 Dev

Elvaleryn

我试图使只读输入元素在仅单击相关按钮时变为黄色。每当我尝试时，我都会一键使所有只读输入变为黄色。我希望它像这样：img1当您选择一个奇数时，仅单击的奇数的输入readonly变为黄色。

const App = () => {

    const [chosen, setChosen] = useState([1])
    const [active, setActive] = useState("gray")
    const [persons, setPersons] = useState( [
    {
      "game": "Kashima - Cerezo Osaka",
      "homeWin": 2.30,
            "draw": 3.10,
            "awayWin": 2.35,
      "id": 0
    },
    {
      "game": "K. Sanuki - Machida Zelvia",
      "homeWin": 3.60,
            "draw": 3.20,
            "awayWin": 1.65,
      "id": 1
    },
    {
            "game": "Jeonnam Dragons - Daegu",
      "homeWin": 2.50,
            "draw": 3.10,
            "awayWin": 2.10,
      "id": 2
    },
        {
            "game": "Ulsan - Suwon Sb",
      "homeWin": 1.85,
            "draw": 3.20,
            "awayWin": 2.90,
      "id": 3
    }   
  ])

    const handleOptionChange = (event) => {
    setOption(event.target.value)
  }

    const chooseOdd = (e) => {
        (e.target.style.backgroundColor === "gray") ? setActive("yellow") : setActive("gray")
        setChosen(chosen.concat(e.target.value))
    }

  return (
    <div>
        {persons.map(p => 
                <div>
                <li key={p.id}>{p.game}</li>
                <div>
                <input type="button" value={p.homeWin} onClick={chooseOdd}/>
                <input id="one" style={{backgroundColor: active}} value={p.homeWin} readOnly/>
                <input type="button" value={p.draw} onClick={chooseOdd}/>
                <input id="two" style={{backgroundColor: active}} value={p.draw} readOnly/>
                <input type="button" value={p.awayWin} onClick={chooseOdd}/>
                <input id="three" style={{backgroundColor: active}} value={p.awayWin} readOnly/>
                </div>
                </div>
            )}

阳光明媚

测试了代码。以下一项。

需要维护每个人元素的状态>>单击每个按钮
扩展运算符[... persons]用于创建新引用，以便重新呈现组件
可以使用p [“ propertyName”]向person元素添加新属性。以后可以使用点运算符来引用

import React, { useState } from 'react';

 const Test = () => {
 const [persons, setPersons] = useState([
{
  game: 'Kashima - Cerezo Osaka',
  homeWin: 2.30,
  draw: 3.10,
  awayWin: 2.35,
  id: 0,
},
{
  game: 'K. Sanuki - Machida Zelvia',
  homeWin: 3.60,
  draw: 3.20,
  awayWin: 1.65,
  id: 1,
},
{
  game: 'Jeonnam Dragons - Daegu',
  homeWin: 2.50,
  draw: 3.10,
  awayWin: 2.10,
  id: 2,
},
{
  game: 'Ulsan - Suwon Sb',
  homeWin: 1.85,
  draw: 3.20,
  awayWin: 2.90,
  id: 3,
 },
 ]);

const handleOptionChange = (person, option) => {
  person[option] = !person[option];
  setPersons([...persons]);
  };

return (
<div>
  {persons.map(p => (
    <div>
      <li key={p.id}>{p.game}</li>
      <div>
        <input type="button" value={p.homeWin} onClick={() => handleOptionChange(p, 'is1Selected')} />
        <input id="one" style={{ backgroundColor: p.is1Selected ? 'Yellow' : 'Gray' }} value={p.homeWin} readOnly />
        <input type="button" value={p.draw} onClick={() => handleOptionChange(p, 'is2Selected')} />
        <input id="two" style={{ backgroundColor: p.is2Selected ? 'Yellow' : 'Gray' }} value={p.draw} readOnly />
        <input type="button" value={p.awayWin} onClick={() => handleOptionChange(p, 'is3Selected')} />
        <input id="three" style={{ backgroundColor: p.is3Selected ? 'Yellow' : 'Gray' }} value={p.awayWin} readOnly />
      </div>
    </div>
  ))}
</div>
 );
};

export default Test;

注意：这不是最优化的方法。您应该为每个人创建一个新的react元素，让该元素处理显示并提供对父元素的回调。

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

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