英文:
How to use multiple useInput in a component?
问题
Introduction:
我是新手网页开发者，我来自移动端。我在一个页面上有两个文本区域，用于创建文本文章，我需要在提交后重置它们。
Problem:
我正在尝试使用两个useInput钩子，一个用于文章标题，另一个用于文章正文。我尝试了许多方法来重置Textareas，但无法成功。我发现使用这个钩子"useInput"可以实现重置。问题是我无法重命名该钩子的值，因此它们重复了。
请问是否有一种方法可以在多个值上使用这个钩子？
我正在使用NextJS 13.0 / NextUI和TypeScript。
英文:
Introduction:
I'm new to web development, I come from mobile. I have two Textareas in a page to build a text article, which I need to reset after submit.
Problem:
import { useInput } from "@nextui-org/react"
const {
value: controlledValue,
setValue: setControlledValue,
reset,
bindings,
} = useInput("");
const {
value: controlledValue,
setValue: setControlledValue,
reset,
bindings,
} = useInput("")
I'm trying to use two useInputs hooks, one for the article title and the second for the article body. I have tried many ways to reset the Texture but I can't. I see that with this hook "useInput" it works.
The problem is that I can't rename the values of that hook and then they are duplicated.
Please is there a way to use this hook for multiple values?
I'm on NextJS 13.0 / NextUI and using TypeScript.
答案1
得分: 0
以下是翻译好的部分：
"use client";
import * as React from "react";
import { useInput } from "@nextui-org/react";
export default function Home() {
const { reset: reset1, bindings: bindings1 } = useInput("");
const { reset: reset2, bindings: bindings2 } = useInput("");
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const data = new FormData(event.target as HTMLFormElement);
const textarea1 = data.get("textarea1");
const textarea2 = data.get("textarea2");
// ...
reset1();
reset2();
};
return (
<form onSubmit={onSubmit}>
<textarea name="textarea1" {...bindings1} />
<textarea name="textarea2" {...bindings2} />
<button type="submit">Submit</button>
</form>
);
}
英文:
You can rename values returned from the hook as follows:
"use client";
import * as React from "react";
import { useInput } from "@nextui-org/react";
export default function Home() {
const { reset: reset1, bindings: bindings1 } = useInput("");
const { reset: reset2, bindings: bindings2 } = useInput("");
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const data = new FormData(event.target as HTMLFormElement);
const textarea1 = data.get("textarea1");
const textarea2 = data.get("textarea2");
// ...
reset1();
reset2();
};
return (
<form onSubmit={onSubmit}>
<textarea name="textarea1" {...bindings1} />
<textarea name="textarea2" {...bindings2} />
<button type="submit">Submit</button>
</form>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论