如何在组件中使用多个 useInput?

huangapple go评论66阅读模式
英文:

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>
  );
}

huangapple
  • 本文由 发表于 2023年7月7日 01:15:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/76631163.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定