javascript - 为使用相同处理程序动态创建的每个组件创建单独的状态

Question

我有一个使用 Material UI 创建的 React 组件，子组件 (Paper) 是根据数组的项目数动态生成的。

我必须更改悬停的 Paper 的 elevation 属性，以将其与其他的区分开来。

在实际应用中，我不知道数组的项数，所以我必须只为 mouseover 和 mouseout 使用一个事件处理程序，但是我无法找到仅将效果应用于悬停的项目的方法，它已应用于所有项目。我该如何解决这个问题？

这是我的代码(我正在使用 React Hooks)

import React, { useState } from 'react'
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
    container : {
        backgroundColor: '#f5f5f5',
        padding: theme.spacing(2),  
    },
    paper: {
      padding: theme.spacing(2),         
    },
  }));

const List = () => {     
    const classes = useStyles();  
    const [elevation, setElevation] = useState(1);
    const items = ['a','b'];

    const paperHandleMouseOver = (evt) => {
        setElevation(4);
    }

    const paperHandleMouseOut = (evt) => {
        setElevation(1);
    }

    return(   
        <div className={classes.container}>
            <Grid container spacing={3}>
                {
                    items.map(item => 
                        <Grid item xs={12}>
                            <Paper elevation={elevation} onMouseOver={paperHandleMouseOver} onMouseOut={paperHandleMouseOut} className={classes.paper}>Test{item}</Paper>
                        </Grid>
                    )
                }                
            </Grid>  
        </div>           
    )
}

export default List

提前致谢

Answer 1

您可以尝试跟踪悬停纸张的索引而不是高度，并使用它来切换值，如下所示:

const List = () => {     
  const classes = useStyles();  
  // const [elevation, setElevation] = useState(1); // don't need to use this anymore
  const [selected, setSelected] = useState(); // New state to track hovered
  const items = ['a','b'];

  // notice the extra '() =>' needed to pass in the index
  const paperHandleMouseOver = (i) => (evt) => {
    //setElevation(4);
    setSelected(i);
  }

  const paperHandleMouseOut = (evt) => {
    //setElevation(1);
    setSelected(null);
  }

  return(   
    <div className={classes.container}>
      <Grid container spacing={3}>
        {items.map((item, i) => 
          <Grid item xs={12}>
            <Paper 
              elevation={i === selected ? 4 : 1} // if selected elevate 4 else 1
              onMouseOver={paperHandleMouseOver(i)} // pass the index
              onMouseOut={paperHandleMouseOut} // dont need the index, just unset
              className={classes.paper}>
                Test{item}
            </Paper>
          </Grid>
        )}                
      </Grid>  
    </div>           
  )
}