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

Question

我正在尝试使只读输入元素在仅单击相关按钮时变为黄色。每当我尝试时，我最终都会通过单击使所有只读输入变为黄色。我希望它是这样的，例如：img1 当你选择一个奇数时，只有被点击的奇数的输入只读变成黄色。

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>
            )}

Answer 1

测试了代码。下面一个作品。

需要维护每个人元素的状态>>每个按钮被点击
扩展运算符 [...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 元素，并让该元素处理显示并向父元素提供回调。

Answer 2

在 React Native Hooks 中

第 1 步 - 添加具有值的状态。

const [ccolor, setColor] = useState('yellow');

第 2 步 - 添加状态值以在数组 [{ styl_1 } , { style_2 } ].

中查看

<View style={[styles.list_L, { backgroundColor: ccolor }]} >

第 3 步 - 添加函数更改颜色。

<Veiw onPress={() => { setColor('red')}}>press me </Veiw>
</View >

Answer 3

您可以从状态添加动态样式和检查条件。

 <View style={[styles.vw_chk_box, isSelected.id_3 ? { marginTop: 180 } : null]} ></View>

.

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

How to dynamically change style by onClick with react hooks?

javascript

events

event-handling

reactjs

react-hooks