使用 react.js Ref 调用函数时出现语法错误答案

【问题标题】：Syntax error when using react.js Ref to call a function使用 react.js Ref 调用函数时出现语法错误
【发布时间】：2023-02-05 12:20:59
【问题描述】：

 x Expected ',', got '.'
    ,-[E:\projects\Coding Stuff\MyThing\thingymajig\src\pages\MainMenu.js:13:1]
 13 |
 14 |
 15 |         function BeginTransaction(
 16 |                             inputRef.current.classList.add("is-active")
    :                                     ^
 17 |                       )

主要使用 bulma 和 react 来制作各种页面，我希望调用 Begintransaction 函数以打开模式。我不确定我在语法上做错了什么，因为它似乎是有序的，但显然不是

import'bulma/css/bulma.css'
import { useRef } from "react"


    
 export default function MainMenu() {
    
      
        const inputRef = useRef(null);
        return (

            
            
        
        function BeginTransaction(
                            inputRef.current.classList.add("is-active")
                      )

        

            <html>
  
                  <body>
                  <div class="modal" ref ={inputRef} id = "WalletEntry">
                      <div class="modal-background"></div>
                          <div class="modal-content">
                          <div class="field">
                              <label class="label">Enter your wallet address</label>
                              <div class="control">

                                <input class="input" type="text" SenderAddress="Text input"/>
                                <button class="button">Enter Address</button>
                              </div>
                              
                              <button class="button">Go back to selection</button>
                            </div>
                          </div>

                      </div>
                    
                      <div class="tile is-ancestor">
                            <div class="tile">
                            <div class="tile is-10 is-vertical is-parent">
                                <div class="is_child box is-danger">
                                
                                 <h3>Ethereum Mainnet</h3>
                                 <figure> 
                                <input onClick={BeginTransaction()}type="image" src="Images/eth.jpg" />    
                                </figure>
                                <div>
                                Advanced deposits with uniswap
                                </div>

                                </div>
                                
                                </div>
                            </div>
                            
                            <div class="tile">
                            <div class="tile is-10 is-vertical is-parent">
                                <div class="is_child box is-danger">
                                

                                 hello
                                <img src="https://bulma.io/images/placeholders/128x128.png"/>
                                </div>
                                </div>
                            </div>
                            
                            <div class="tile">
                            <div class="tile is-10 is-vertical is-parent">
                                <div class="is_child box is-danger">
                                

                                 hello
                                <img src="https://bulma.io/images/placeholders/128x128.png"/>
                                </div>
                                </div>
                            </div>
                      </div>
                      
                      
                      
                      

                  </body>
            </html>
      )}

我试图调用一个带有 ref 的模态来激活它，有问题的模态是在身体的顶部制作的。

【问题讨论】：

标签： node.js reactjs bulma

【解决方案1】：

您将函数的主体放在参数中。

此外，该函数应在返回之前移动并切换为内联函数

const inputRef = useRef(null);

const BeginTransaction = () => {
    inputRef.current.classList.add("is-active")
};

return (
    /* your elements here */
);

【讨论】：