У меня есть свой Input компонент, и передаю в него значение defaultValue, но почему-то оно остаётся пустым (использую ещё react hook form)
Вот компонент
import React, {
ChangeEventHandler,
forwardRef,
InputHTMLAttributes
} from 'react';
import Icon from '../icon/Icon';
import Style from './Input.module.scss';
enum InputType {
text = 'text',
number = 'number',
checkbox = 'checkbox'
}
type InputTypeString = keyof typeof InputType;
interface IInput extends InputHTMLAttributes<HTMLInputElement> {
type?: InputTypeString;
placeholder?: string;
onChange?: ChangeEventHandler;
required?: boolean;
autoFocus?: boolean;
classes?: string;
value?: any;
defaultValue?: string | number;
select?: boolean;
readonly?: boolean;
openSelect?: boolean;
onClick?: () => void;
}
const Input = forwardRef<HTMLInputElement, IInput>(
(
{
type,
placeholder,
onChange,
required,
autoFocus,
classes,
value,
select,
readonly,
openSelect,
onClick,
defaultValue
},
ref
) => {
const customClass = classes ? classes : '';
return (
<>
{!select && type === 'checkbox' ? (
<label className={`${Style.checkbox} ${customClass}`}>
<input
ref={ref}
type={type}
value={value}
onClick={onClick}
onChange={onChange}
required={required}
readOnly={readonly}
autoFocus={autoFocus}
/>
<span className={Style.checkboxFake}></span>
{placeholder ? <p>{placeholder}</p> : null}
</label>
) : null}
{!select && type !== 'checkbox' ? (
<label className={`form-control ${Style.input} ${customClass}`}>
<input
ref={ref}
type={type}
value={value}
onClick={onClick}
onChange={onChange}
required={required}
readOnly={readonly}
autoFocus={autoFocus}
placeholder={placeholder}
defaultValue={defaultValue}
className={`control -single`}
/>
</label>
) : null}
{select ? (
<label
className={`form-control ${Style.input} ${Style.select} ${
openSelect ? Style.openSelect : ''
}`}
>
<input
ref={ref}
type={type}
value={value}
onClick={onClick}
readOnly={readonly}
placeholder={placeholder}
defaultValue={defaultValue}
className={`control -single`}
/>
<Icon id="a-down" width={7} height={6} />
</label>
) : null}
</>
);
}
);
Input.displayName = 'Input';
export default Input;
Использую его на странице, где из select передаю значение, то есть вручную ввести его нельзя
<Select >
<Input
select={true}
readonly={true}
defaultValue={selectValue?.code}
// value={selectValue?.code}
openSelect={isContextOpen}
{...register('currency')}
onClick={() => setIsContextOpen(true)}
/>
</Select>
Вот так выглядит input в DOM
<input class="control -single" value="" readonly="">
У меня после выбора в select инпут остаётся пустым...
А если я не использую defaultValue а value тогда ругается что нету onChange...
Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.