如何在提交表单的页面上的任何位置创建按钮

Question

我正在尝试创建一个按钮，我可以把它放在页面上的任何地方来提交特定的表单。我有兴趣使用Hooks和Context/Provider模式在应用程序中的任何地方公开这种状态。

Answer 1

下面的代码创建了一个上下文/提供程序，它可以访问useState钩子来设置提交函数。

import React from 'react';
import {createContext, ReactNode, useContext, useEffect, useRef, useState} from 'react';
export type HiddenButtonSubmitContext = {
submit: () => void,
setSubmitHandler: React.Dispatch<React.SetStateAction<() => void>>
}
export const defaultSetSubmitHandler = () => () => {
// eslint-disable-next-line no-console
console.log('submit handler was never set')
}
export const SubmitContext = createContext<HiddenButtonSubmitContext>({
submit: () => {
throw new Error('submit not set, make surea all calls to useHiddenButton are within HiddenButtonProvider');
},
setSubmitHandler: defaultSetSubmitHandler()
})
export const useHiddenButton = () => useContext(SubmitContext)
export const HiddenButtonProvider: React.FC<{ children?: ReactNode | undefined }> = ({ children }) => {
const [submit, setSubmitHandler] = useState(defaultSetSubmitHandler)
return (
<SubmitContext.Provider value={{submit, setSubmitHandler}}>
{children}
</SubmitContext.Provider>
)
}
export const HiddenButton = () => {
const hiddenButtonRef = useRef<any>()
const { setSubmitHandler } = useHiddenButton()
useEffect(() => {
setSubmitHandler(() => () => {
hiddenButtonRef.current.click()
})
}, [setSubmitHandler])

return (
<input type="submit" style={{ display: 'none' }} ref={hiddenButtonRef} />
)
}

以下是示例用法：

const Btn = () => {
const { submit } = useHiddenButton()
return <button onClick={() => submit()}>hi</button>
}
export function Example () {
return (
<HiddenButtonProvider>
<Btn />
<form onSubmit={(e) => {
e.preventDefault()
console.log('submitted')
}}>
<HiddenButton/>
</form>
</HiddenButtonProvider>
)
}