Question

在函数调用中，我正在使用useState挂钩更改图像样式我把这些财产当作道具基本上我想要一个应该包含img的样式属性并将其作为props style = {{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"}} )} 我认为这种方法不正确

Answer 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)}
          />
         </>
         )}

Answer 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"})}

      />
    </>
)}

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

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

2 个答案: