如何在函数调用的反应挂钩中更改样式属性答案

【问题标题】：How to change style property in react hooks on function call如何在函数调用的反应挂钩中更改样式属性
【发布时间】：2020-08-07 23:28:53
【问题描述】：

在函数调用时，我正在使用 useState 挂钩更改图像样式我将这些财产作为道具发送基本上我想要一个应该包含 img 样式属性的函数，并将其作为 propsstyle = {{opacity: ".3"}}

传递给另一个组件

import React, { useState } from 'react';
import BackgroundImage from '../Image/Homepage/background.png'
const HomePage = () => {
const [modalShow, setModalShow] = useState(false);
const [image, setImage] = useState(BackgroundImage)

return (
        <div>
       <img src={image} className="first-image" alt="backGroundImage" />
        </div>
                <Modals
                    show={modalShow}
                    onhide={() => setModalShow(false)}
                    sendImages = {() => setImage( style = {{opacity: ".3"}} )}

                />
)}

这是抛出一个错误 sendImages = {() => setImage( style = {{opacity: ".3"}} )} 我认为这是不对的方法

【问题讨论】：

BackgroundImage的任何代码？
我正在导入图片
详细错误是什么？
基本上我想要一个应该包含 img 样式属性的函数，并将其作为 propsstyle = {{opacity: ".3"}} 传递给另一个组件

标签： reactjs react-hooks

【解决方案1】：

看起来您想使opacity 动态化，而不是您操作图像 src...

     import React, { useState } from 'react';
     import BackgroundImage from '../Image/Homepage/background.png'

     const HomePage = () => {
       const [modalShow, setModalShow] = useState(false);
       const [image, setImage] = useState(BackgroundImage);
       const [opacity, setOpacity] = useState(1);

       return (
         <>
          <div>
            <img src={image} className="first-image" style={{opacity}} alt="backGroundImage" />
          </div>
          <Modals
            show={modalShow}
            onhide={() => setModalShow(false)}
            sendImages = {() => setOpacity(0.3)}
          />
         </>
         )}

【讨论】：

【解决方案2】：

如果您只想在函数调用时更新样式属性，则必须将样式属性存储在状态中，而不是图像中。此外，您的代码中 setImage 的语法也不正确

import React, { useState } from 'react';
import BackgroundImage from '../Image/Homepage/background.png'
const HomePage = () => {
const [modalShow, setModalShow] = useState(false);
const [imageStyle, setImageStyle] = useState({})

return (
    <>
      <div>
         <img src={BackgroundImage} style={imageStyle} className="first-image" alt="backGroundImage" />
      </div>
      <Modals
          show={modalShow}
          onhide={() => setModalShow(false)}
          sendImages = {() => setImageStyle({opacity: ".3"})}

      />
    </>
)}

注意：另外请注意，带有钩子的状态更新器不会合并值而是覆盖它。因此，如果您只想更新某些属性，请使用状态更新器回调方法自己返回合并值

【讨论】：