如何在 html 中预填输入表单并使其可编辑

Question

我想在我的 React 应用程序中制作编辑页面，但我正在努力如何以输入形式显示值并使其可编辑。我正在通过 API 获取食谱数据，并希望将其显示给用户，使其可编辑并通过 POST 请求再次发送。

如果我写：

<input
 type="text"           
 required
value={recipe.title}
onChange={(e) => setTitle(e.target.value)}>
</input>

标题已显示，但无法以任何方式更改

如果我写

<textarea
type="text"
required value={title}
onChange={(e) => setTitle(e.target.value)}>
{recipe.title}
</textarea>

什么都不显示

我想理想的解决方案是获取数据并将其用作 useState 的初始状态，如下所示：

const { data: recipe2 }  = useFetch(url_recipes + `${id}`)

const [title, setTitle] = useState(recipe.title);

<input
type="text"
required
value={title}
onChange={(e) => setTitle(e.target.value)}
></input>

但我不确定具体怎么做。感谢您的帮助。

Answer 1

正如您在上一个解决方案中指出的那样，理想的方法是创建一个 double-way 与输入和状态的绑定（通过创建受控组件）。您可以通过将状态名称作为 value 并作为 onChange 处理程序提供正确的 setState 方法来更新状态的值。输入将是这个：

<input
type="text"
required
value={title}
onChange={(e) => setTitle(e.target.value)}
></input>

但是，要确保输入获取获取的数据作为值，您可以使用 useEffect 挂钩来确保状态在从 API 获取数据后获取数据：

const { data: recipe2 }  = useFetch(url_recipes + `${id}`)

const [title, setTitle] = useState("");

useEffect(() => {
 if(recipe2 && recipe2.title){
  setTitle(recipe2.title);
 }
}, [recipe2])

如何在 html 中预填输入表单并使其可编辑

how to prefill input form in html and make it editable

html

reactjs

input

edit