我正試圖在react中制作一個簡單的 "我的賬戶 "頁面，用戶可以在其中編輯他/她的賬戶資訊。我有兩個組件，導航條和表單本身，但是，表單的提交按鈕在導航條組件中，而表單本身在accountdetails組件中。它們都共享一個父組件（App.js）。我如何使螢屏右上角的按鈕（編輯按鈕）作為表單的提交按鈕，從而使所有的表單驗證作業，用戶不能提交錯誤的資料。
你可以在這里找到相應的代碼。
uj5u.com熱心網友回復：
你可以嘗試在表單組件中創建一個不可見的提交按鈕，并從你的App.js組件中向它傳遞一個參考。然后你可以在App.js中創建一個函式，以編程方式點擊表單中的隱形按鈕。然后這個函式可以被傳遞給導航條上的按鈕，并觸發onClick。請看下面的例子：
App.js
...
export default App = () =>/span> {
const submitButtonRef = useRef(null)。
const submitForm = (/span>) => {
if (submitButtonRef) {
submitButtonRef.current.click（）。
}
}
return (
...
<Navbar submitForm={submitForm}。/>
<FormComponent submitButtonRef={submitButtonRef} />/span>
...
)
Navbar組件
...
export default Navbar = ({submitForm}) => /span> {
return (
...
<button onClick={()=>submitForm()}>Submit< /button
...
)
表單組件
...
export default FormComponent = ({submitButtonRef}) => /span> {
return (
...
<按鈕
style={{display: "none"}}}
htmlType="submit"}。
ref={submitButtonRef}
>
提交。
</button>
...
)
我只是一個新手，所以任何建議都會非常感激。謝謝你！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/311798.html
標籤：
下一篇：通過套接字發送Jar檔案