英文:
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>);}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论