Closed2021/08/19にクローズ1

React TextField Component

JavaScript

React

JSX

hanetsuki 2021/08/19

firstName・lastNameを出したい時などに便利そうだなと思って作った。

正直、難読になってしまった感ある...

textarea, input を一つのコンポーネントで利用できる。
inputのtypeはそのまま使える。（emailとか、checkboxとか）
labelとセットで使える。
idを配列で渡したときに、複数の入力フィールドを表示させることができる。

import React from "react"
import classNames from 'classnames'
import * as Styles from "../styles/_text-field.module.scss"

export default function TextField(props) {
  const {
    id,
    label,
    multiple,
    ...restProps
  } = props

  return (
    <>
      <label htmlFor={Array.isArray(id) ? id[0] : id} >
        {label}
      </label>

      {(() => {
        if (multiple) {
          return (
            <textarea
              className={classNames(
                Styles.textareaField,
                { [Styles.required]: restProps.required }
              )}
              id={id}
              {...restProps}
            ></textarea>
          )
        }

        if (Array.isArray(id)) {
          return (
            <>
              {id.map((v, i) => {
                return (
                  <div
                    className={classNames(
                      Styles.inputField,
                      { [Styles.required]: restProps.required }
                    )}
                  >
                    <input
                      key={v}
                      id={v}
                      {...Object.assign(
                        {},
                        ...Object.entries(restProps).map(
                          ([key, value]) => {
                            return Array.isArray(value) ? (
                              { [key]: value[i] }
                            ) : (
                              { [key]: value }
                            )
                          }
                        )
                      )}
                    />
                  </div>
                )
              })}
            </>
          )
        }

        return (
          <div
            className={classNames(
              Styles.inputField,
              { [Styles.required]: restProps.required }
            )}
          >
            <input
              id={id}
              {...restProps}
            />
          </div>
        )
      })()}
    </>
  )
}

このスクラップは2021/08/19にクローズされました