Reactjs 如何创建\合并函数

我有重复的代码，基本上控制了凸起的背景。 我更喜欢onMouseOver&OnMouseOut函数，这样代码的可读性会更好

我假设这应该是一个定制的钩子，但不确定如何做到这一点

多谢各位

const [descRaised, setDescRaised] = useState(false);
const descOnMouseOver = () => { setDescRaised(true) }
const descOnMouseOut = () => { setDescRaised(false) }

const [inspRaised, setInspRaised] = useState(false);
const inspOnMouseOver = () => { setInspRaised(true) }
const inspOnMouseOut = () => { setInspRaised(false) }

<Grid item xs={6}>
                    <Card
                        id="descCard"
                        style={{ borderColor: green[500] }}
                        className={classes.card}
                        onMouseOver={descOnMouseOver}
                        onMouseOut={descOnMouseOut}
                        raised={descRaised}> .......


      <Card
                        style={{ borderColor: pink[500] }}
                        className={classes.card}
                        onMouseOver={inspOnMouseOver}
                        onMouseOut={inspOnMouseOut}
                        raised={inspRaised}>.........

const[descrised，setdescrised]=useState（false）；
const descOnMouseOver=（）=>{setdescrised（true）}
const descOnMouseOut=（）=>{setdescrised（false）}
const[inspreadised，setinspreadised]=useState（false）；
const inspOnMouseOver=（）=>{setinspremised（true）}
const inspOnMouseOut=（）=>{setinsmouseout（false）}
.......
.........

您可以在以下代码中使用一个类似的

useState

：

const [raised, setRaised] = useState({
   descCard: false,
   inspCard: false
});

const onMouseOver = (e) => { setRaised(prevState => ({ ...prevState, [e.target.id]: true }));}
const onMouseOut = (e) => { setRaised(prevState => ({ ...prevState, [e.target.id]: false})); }

<Grid item xs={6}>
                    <Card
                        id="descCard"
                        style={{ borderColor: green[500] }}
                        className={classes.card}
                        onMouseOver={onMouseOver}
                        onMouseOut={onMouseOut}
                        raised={descCard}> .......


      <Card id='inspCard'
                        style={{ borderColor: pink[500] }}
                        className={classes.card}
                        onMouseOver={onMouseOver}
                        onMouseOut={onMouseOut}
                        raised={inspCard}>

const[raised，setRaised]=useState({
描述卡：错，
inspCard:错误
});
const onMouseOver=（e）=>{setRaised（prevState=>（{…prevState[e.target.id]：true}））；}
const onMouseOut=（e）=>{setRaised（prevState=>（{…prevState[e.target.id]：false}））；}
.......

你好，莫妮卡，感谢您的快速重播。我为丢失的代码道歉。想让这个问题更具可读性。您的解决方案的问题是，由于卡包含CardHeader、CardContent等内容，因此ID可能为空。您可以使用任何可能是卡唯一的内容，如名称。或者，如果没有类似的情况，可以添加一些独特的属性来区分调用哪张卡。您还可以在onMouseOver和onMouseOut中传递参数，以标识调用哪个卡。：-）谢谢您的帮助。@angus我建议将

onMouseOver

切换到

onMouseEnter

以提高性能，

onMouseOver

将在将鼠标移到卡上时重新调用，而不仅仅是在输入和输出时调用一次