如何從 html 中將 arguments 傳遞給 function？

Question

我正在遍歷對象數組，我想為每個迭代調用 function，對象屬性為 arguments。 當我單擊按鈕時，它所做的只是重新加載頁面並且不會將 arguments 傳遞給 function，因為當我 console.log() 時我在控制台中看不到它

const Posts = () => {


  const mySubmitHandler = async ( pos) => {
    console.log(pos);
    try {
      console.log(window.web3.currentProvider)
      console.log(accounts)
      const res = await snInstance.reply(pos, reply, { from: accounts[0] });
      console.log("-----------------rererer-----------------")
      console.log(res, accounts);
    } catch (e) {
      console.error(e)
    }
  }

 return (
      <div>
        {socialNetworkContract.posts.map((p, index) => {
          return <tr key={index}>
    <form onSubmit={() => mySubmitHandler(p.postsCounter)} style={{ textAlign: 'center' }}>

          <div style={{ padding: '10px' }} >
            <input
              type='text'
              name='reply'
              onChange={myChangeHandler}
              required
            /></div>

    <input type='submit' value="Reply" />
    </form>
    
     <button variant="primary" onClick={Like}>Like</button>
     </div>
  )
}


export default Posts;

當我在 snInstance.reply() 中替換“pos”時，function 將起作用，但它只發布對索引 1 帖子的回復。p.publisher 是 integer，p.postCounter 也是如此。 我需要將這些作為 arguments 傳遞給這些函數。

Answer 1

在async請求的情況下防止默認頁面重新加載：

將事件 object e傳遞給onSubmit()處理程序：

onSubmit={(e) => mySubmitHandler(e, p.postsCounter)}

然后，在onSubmit()內部，使用e.preventDefault() ：

const mySubmitHandler = async (e, pos) => {
    .....
}

Answer 2

您必須使用event.preventDefault() 停止表單提交的默認操作；

<form onSubmit={(event)=>{
 event.preventDefault();
 mySubmitHandler(p.postsCounter);
}}
...>