使用 React & TypeScript 創建可重用的表單輸入組件

Question

如何在 typescript 中定義輸入屬性？ 我有一個 AddUser 組件和 TextInput 組件，我想在 AddUser 組件中導入 TextInput 組件，然后將道具傳遞給 TextInput 組件。

添加用戶.tsx

import Button from '../Shared/Form/Button/Button';
import Form from '../Shared/Form/Form';
import TextArea from '../Shared/Form/TextArea/TextArea';
import TextInput from '../Shared/Form/TextInput/TextInput';

const AddUser = () => {
    return (
        <div>
            <h1>Add User</h1>
            <Form method="post" className={'user-form'}>
                <TextInput label={'Name'} type="text" name="name" required />
                <TextInput label={'Email'} type="email" name="email" required />
                <TextInput label={'Country'} type="text" name="country" required />
                <TextInput label={'Phone'} type="text" name="phone" required />
                <TextArea label={'Address'} name="address" cols="30" rows="4" />
                <div className="form-button">
                    <Button type={'submit'} className={'btn-add'}>
                        Add
                    </Button>
                    <Button type={'submit'} className={'btn-close'}>
                        Cancel
                    </Button>
                </div>
            </Form>
        </div>
    );
};

export default AddUser;

文本輸入.tsx

const TextInput = ({ className, label, ...rest }: { className: string; label: string }) => {
    return (
        <div className={`${className} form-field`}>
            <label htmlFor={label}>{label}</label>
            <input {...rest} />
        </div>
    );
};

export default TextInput;

Answer 1

你可以擴展 react 自帶的HTMLProps ：

import { HTMLProps } from "react";

interface MyCOmponentProps extends HTMLProps<HTMLInputElement> {
  {...}
}

Answer 2

這就是我們如何制作可重用組件的方法。 根據類型腳本，也許我錯過了 onChangeAction 中的某些內容。 請在評論部分讓我認識我，以便我可以更好地幫助你

示例代碼框

const AddUser = () => {
  return (
    <div>
      <h1>Add User</h1>
      <form method="post" className={"user-form"}>
        <TextInput
          label={"Name"}
          placeholder="Name"
          type="text"
          name="name"
          required
        />
        <TextInput
          label={"Email"}
          placeholder="Email"
          type="email"
          name="email"
          required
        />
        <TextInput
          label={"Country"}
          placeholder="Country"
          type="text"
          name="country"
          required
        />
        <TextInput
          label={"Phone"}
          placeholder="Phone"
          type="text"
          name="phone"
          required
        />
      </form>
    </div>
  );
};

export default AddUser;

const TextInput = ({
  className,
  label,
  value,
  type,
  onChangeAction,
  placeholder
}) => {
  return (
    <div className={`${className} form-field`}>
      <label htmlFor={label}>{label}</label>
      <input
        placeholder={placeholder || "Text"}
        type={type || "text"}
        value={value}
        onChange={onChangeAction}
      />
    </div>
  );
};

Answer 3

這不是您問題的答案，但您是否看過 formik -> https://formik.org/docs/overview

您可以創建可重用的表單:)