ReactuseRef()在MouseOver上不起作用以更改div的backgroundColor

我是 React 的新手。我的問題是我正在嘗試更改我在 React 中動態呈現的 div 的背景顏色。為此，我了解了 useRef() 來挑選出元素。

如果我在 onHover 函式中執行 console.log() ，則日志在瀏覽器中有效，但元素的背景顏色由于某種原因不會改變，即使我已經實作了 useRef 其他人出于同樣的原因。

提前感謝您的幫助，這里是代碼：

import React, { useRef } from "react";

const CountiesList = () => {
    const counties = [
        'Antrim',
        'Armagh',
        'Carlow',
        'Cavan',
        'Clare',
        'Cork',
        'Derry',
        'Donegal',
        'Down',
        'Dublin',
        'Fermanagh',
        'Galway',
        'Kerry',
        'Kildare',
        'Kilkenny',
        'Laois',
        'Leitrim',
        'Limerick',
        'Longford',
        'Louth',
        'Mayo',
        'Meath',
        'Monaghan',
        'Offaly',
        'Roscommon',
        'Sligo',
        'Tipperary',
        'Tyrone',
        'Waterford',
        'Westmeath',
        'Wexford',
        'Wicklow'
    ]

    const liItem = useRef(null)
    
    const onHover = () => {
        liItem.current.style.backgroundColor = 'cornflowerblue'
    }
        
    const ulStyle = {
        listStyleType: 'none',
        paddingInlineStart: 0,
        margin: 0,
        width: '100%',
        height: '300px',
        overflowY: 'scroll',
        borderBottomLeftRadius: '12px'
    }
        
    const liItemContainer = {
        height: '50px',
        paddingLeft: '15px',
        display: 'flex',
        alignItems: 'center',
        backgroundColor: '#a9c4f5'
    }
        
    const liStyle = {
        fontWeight: '700'
    }
        
    let countiesListItems = counties.map(county => {
        return (
            <div ref={liItem} key={county} style={liItemContainer} onMouseOver={onHover}>
                <li style={liStyle}>{county}</li>
            </div>
        )
    })
        
    return (
        <ul style={ulStyle}>
            {countiesListItems}
        </ul>
    )
}

export default CountiesList;

uj5u.com熱心網友回復：

那是因為你ref在一個元素陣列上使用了一個，你需要使用一個模板陣列refs或者只是傳遞目標元素onMouseOver={(e) => onHover(e.target)}并直接更改style而不需要模板refs

import React, { useRef } from "react";

const CountiesList = () => {
    const counties = [
        'Antrim',
        'Armagh',
        'Carlow',
        'Cavan',
        'Clare',
        'Cork',
        'Derry',
        'Donegal',
        'Down',
        'Dublin',
        'Fermanagh',
        'Galway',
        'Kerry',
        'Kildare',
        'Kilkenny',
        'Laois',
        'Leitrim',
        'Limerick',
        'Longford',
        'Louth',
        'Mayo',
        'Meath',
        'Monaghan',
        'Offaly',
        'Roscommon',
        'Sligo',
        'Tipperary',
        'Tyrone',
        'Waterford',
        'Westmeath',
        'Wexford',
        'Wicklow'
    ]

    const liItem = useRef(null)
    
    const onHover = (element) => {
        element.style.backgroundColor = 'cornflowerblue'
    }
        
    const ulStyle = {
        listStyleType: 'none',
        paddingInlineStart: 0,
        margin: 0,
        width: '100%',
        height: '300px',
        overflowY: 'scroll',
        borderBottomLeftRadius: '12px'
    }
        
    const liItemContainer = {
        height: '50px',
        paddingLeft: '15px',
        display: 'flex',
        alignItems: 'center',
        backgroundColor: '#a9c4f5'
    }
        
    const liStyle = {
        fontWeight: '700'
    }
        
    let countiesListItems = counties.map(county => {
        return (
            <div ref={liItem} key={county} style={liItemContainer} onMouseOver={(e) => onHover(e.target)}>
                <li style={liStyle}>{county}</li>
            </div>
        )
    })
        
    return (
        <ul style={ulStyle}>
            {countiesListItems}
        </ul>
    )
}

export default CountiesList;

uj5u.com熱心網友回復：

如果你真的想“在軟體中”做懸停效果（即不使用 CSS，這對于純粹的視覺效果更受歡迎），那么 React 方法是使用 state，而不是 refs。

const ulStyle = {
  listStyleType: "none",
  paddingInlineStart: 0,
  margin: 0,
  width: "100%",
  height: "300px",
  overflowY: "scroll",
  borderBottomLeftRadius: "12px"
};

const liItemContainer = {
  height: "50px",
  paddingLeft: "15px",
  display: "flex",
  alignItems: "center"
};

const liStyle = {
  fontWeight: "700"
};

const counties = [
  "Antrim",
  "Armagh",
  "Carlow",
  "Cavan",
  // ...
];

const CountiesList = () => {
  const [hoveredCounty, setHoveredCounty] = React.useState(null);
  const onHover = (event) => {
    setHoveredCounty(event.currentTarget.dataset.county);
  };

  return (
    <ul style={ulStyle}>
      {counties.map((county) => (
        <div
          data-county={county}
          key={county}
          style={{
            ...liItemContainer,
            background: hoveredCounty === county ? "orange" : "#a9c4f5"
          }}
          onMouseOver={onHover}
        >
          <li style={liStyle}>{county}</li>
        </div>
      ))}
    </ul>
  );
};

標籤：javascript 反应 jsx 支配权 使用参考

上一篇：洗掉時永遠不要在我的資料庫中拋出錯誤

下一篇：檢查復選框是否被選中并警告“嗨”