Javascript 如何在JSX中动态更新样式

我正在尝试使用React中的

useRef（）

hook更新单击每个按钮时的单个样式

现在，当我单击任何按钮时，样式更改始终应用于渲染的最后一个按钮

我相信这是需要注意的一点，但我被难住了

consthandleclick=（）=>{
status.current.style.background='green'；
}  

下面是完整的部分：

import React，{useRef}来自“React”；
从“react dom”导入react dom；
导入“./index.css”；
让背景='蓝色'；
让控件=[]；
const makeControls=（）=>{
for（设i=1；i{
const status=useRef（'blue'）；
makeControls（）；
常量handleClick=（）=>{
status.current.style.background='green'；
}  
返回(
{controls.map（（control，i）=>(
handleClick（）}>
))}
);
};
ReactDOM.render（，document.getElementById（'root'））；

目前，您的

ref

仅针对最后一个项目，您应该通过创建一个ref数组来针对所有控制项目

let controls = [];

const makeControls = () => {
  for (let i = 1; i <= 9; i++) {
    controls.push({ active: false });
  }
  return controls;
};

makeControls();

const ControlPanel = () => {
  const status = useRef([]);

  const handleClick = index => {
    status.current[index].style.background = 'green';
  };

  return (
    <>
      {controls.map((control, i) => (
        <div
          ref={ref => (status.current[i] = ref)}
          style={{ background: `blue`, width: 100, height: 100 }}
          key={i}
          onClick={() => handleClick(i)}
        />
      ))}
    </>
  );
};

let控件=[]；
const makeControls=（）=>{
for（设i=1；i{
const status=useRef（[]）；
const handleClick=索引=>{
status.current[index].style.background='green'；
};
返回(
{controls.map（（control，i）=>(
（status.current[i]=ref）}
样式={{背景：蓝色`，宽度：100，高度：100}
key={i}
onClick={（）=>handleClick（i）}
/>
))}
);
};

---

呈现

列表时，您的

状态每次都会被重新分配，最后在最后一个元素上停止

这就是最后一个元素被更新的原因

相反，为什么不将背景颜色信息存储在控件对象本身上呢

for（设i=1；i(
handleClick（控制）}>
))}

consthandleclick=（控制）=>{
control.background='绿色'；
}  
您可以使用state来执行此操作
像这样

import React, { useRef,useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';


let controls = [];

const makeControls = () => {
  for (let i = 1; i <= 9; i++) {
    controls.push({active: false});
  }
  return controls;
};

const ControlPanel = () => {
  const [controlState,setControlState]=useState({background:"blue"})
  const status = useRef('blue');
  makeControls();

  const handleClick = () => {
    setControlState({background:"green"});
  }  

  return (
    <>
      {controls.map((control, i) => (
        <div
          ref={status}
          style={{background: controlState.background}}
          className={'box'}
          key={i}
          onClick={() => handleClick()}></div>
      ))}
    </>
  );
};

ReactDOM.render(<ControlPanel />, document.getElementById('root'));

import React，{useRef，useState}来自“React”；
从“react dom”导入react dom；
导入“./index.css”；
让控件=[]；
const makeControls=（）=>{
for（设i=1；i{
const[controlState，setControlState]=useState（{背景：“蓝色”}）
const status=useRef（'blue'）；
makeControls（）；
常量handleClick=（）=>{
setControlState（{背景：“绿色”}）；
}  
返回(
{controls.map（（control，i）=>(
handleClick（）}>
))}
);
};
ReactDOM.render（，document.getElementById（'root'））；
这比使用
synthetic
事件有任何优势。
const-handleClick=e=>e.target.style
看起来更简单。