reactjs - React：如何在为输入字段使用自定义组件时显示特定通知？

Question

我正在创建一个具有多个输入字段的简单组件。此字段正在使用自定义组件。该组件的功能之一是允许我在输入字段下方显示标题。该标题接受两种值，第一种是字段描述，另一种是错误消息。我的问题是如果后端返回一个错误消息，比如请输入一个值，由于我的输入字段组件，此消息将显示在所有输入字段上。请帮助我根据输入字段显示错误消息。

标题属性是将显示错误消息或字段标题的属性。

输入字段 import InputField from '../ui/InputField';

<InputField
                              variant='input'
                              type='text'
                              placeholder='Title'
                              name='title'
                              border={
                                error && error.titleError
                                  ? 'failed'
                                  : 'transparent'
                              }
                              value={itemInfo.title}
                              maxLength='32'
                              error={error}
                              chkInputLength={true}
                              caption='Give your item short and clear name.'
                              onChange={handleOnChange}
                            />

输入字段组件

const InputField = forwardRef(
  (
    {
      variant,
      value,
      name,
      placeholder,
      type,
      border,
      error,
      maxLength,
      chkInputLength,
      rows,
      onChange,
      caption,
    },
    ref
  ) => (
    <>
      {variant && variant === 'input' ? (
        type && type === 'text' ? (
          <input
            autoComplete='nope'
            type={type}
            value={value}
            name={name}
            className={`bg-customBlack-light hover:bg-customBlackLighter-light w-full text-xs p-4 mb-2 rounded-full border border-${border} outline-none transition duration-250 ease-in-out`}
            placeholder={placeholder}
            maxLength={maxLength}
            onChange={onChange}
            ref={ref}
          />
        ) : type === 'number' ? (
          <>
            <div className='absolute top-0 left-0 mt-3.5 pl-5 flex items-center pointer-events-none'>
              <span className='text-gray-500 sm:text-sm'>₱&lt;/span>
            </div>
            <input
              autoComplete='nope'
              type={type}
              value={value}
              name={name}
              className={`bg-customBlack-light hover:bg-customBlackLighter-light w-2/5 text-xs pt-4 pl-8 pb-4 pr-4 mb-2 rounded-full border border-${border} outline-none transition duration-250 ease-in-out`}
              placeholder={placeholder}
              maxLength={maxLength}
              onChange={onChange}
              ref={ref}
            />
          </>
        ) : (
          ''
        )
      ) : variant === 'textarea' ? (
        <textarea
          type={type}
          value={value}
          name={name}
          className={`bg-customBlack-light hover:bg-customBlackLighter-light w-full text-xs p-4 rounded-30px border border-${border} outline-none resize-none transition duration-250 ease-in-out`}
          placeholder={placeholder}
          rows={rows}
          maxLength={maxLength}
          onChange={onChange}
        />
      ) : (
        <input
          autoComplete='nope'
          type={type}
          value={value}
          name={name}
          className={`bg-customBlack-light hover:bg-customBlackLighter-light w-full text-xs p-4 mb-2 rounded-full border border-${border} outline-none transition duration-250 ease-in-out`}
          placeholder={placeholder}
          maxLength={maxLength}
          onChange={onChange}
          ref={ref}
        />
      )}
      {chkInputLength && (
        <label htmlFor={name} className='text-toolTipSubTitle flex mr-4'>
          {error && error.msg ? (
            <span className='text-xxs text-customRed fadeIn'>{error.msg}</span>
          ) : (
            <span className='text-toolTipSubTitle text-customBlack ml-4'>
              {caption}
            </span>
          )}
          <span className='text-customBlack font-semibold absolute right-0'>
            {value && maxLength
              ? Math.abs(value.length - maxLength)
              : maxLength}
          </span>
        </label>
      )}
    </>
  )
);

标签： reactjs