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

Question

在函数调用中，我正在使用 useState 挂钩更改图像样式我将这些属性作为道具发送基本上我想要一个函数，该函数应该包含 img 的样式属性并将其作为道具传递给另一个组件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"}} )} 我认为这不是正确的方法

标签： reactjsreact-hooks

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