一种解决方法是使用React的状态管理来更新表单的action值。你可以使用useState钩子来创建一个状态,并使用useEffect钩子来监听状态的变化。当状态变化时,你可以更新表单的action值。
以下是一个示例代码:
import React, { useState, useEffect } from 'react';
const Form = () => {
const [action, setAction] = useState('/submit');
useEffect(() => {
// 当状态变化时,更新表单的action值
document.getElementById('myForm').action = action;
}, [action]);
const handleActionChange = (e) => {
setAction(e.target.value);
};
return (
);
};
export default Form;
在上面的代码中,我们创建了一个名为action
的状态,并使用useState
钩子来进行状态管理。然后,我们使用useEffect
钩子来监听action
状态的变化。当action
状态发生变化时,我们使用document.getElementById('myForm').action
更新表单的action值。
在handleActionChange
函数中,我们使用setAction
函数来更新action
状态,这将触发useEffect
钩子的执行。
这样,当你在输入框中输入新的action值时,表单的action值将会被更新。