Как установить атрибут заполнителя для ввода текста в React?
Я новичок в React и создаю атом текстового ввода. Я хочу иметь возможность установить заполнитель в качестве опоры. Если заполнитель пуст, я не хочу, чтобы атрибут отображался (нет смысла иметь пустой атрибут placeholder. Однако мне не удалось это понять.
Я пробовал различные методы, включая тернарный оператор как таковой:
let placeholderAttr = placeholder ? `placeholder = "${placeholder}"`: '';
return (
<div className = {['text-field', `text-field-${size}`, statusStylesInput].join(' ')}>
<input type = "text" {placeholderAttr}></input>
</div>
)
Но это не работает. Я могу установить атрибут напрямую, например:
<input type = "text" placeholder = {placeholder}></input>
Но если свойство заполнителя пусто, оно все равно отображает пустой атрибут заполнителя, например:
<input type = "text" placeholder></input>
Кто-нибудь знает, как лучше всего это сделать?
Я думаю, вы могли бы сделать {...(placeholder ? { placeholder } : {}}, но кажется, что это слишком много для «решения» того, что на самом деле не является проблемой.
Здесь вы вступаете в бой с React. Я бы ни в малейшей степени не беспокоился о таком пустом атрибуте. Браузер не обрабатывает атрибуты-заполнители, placeholder и placeholder = "" одинаково, это не атрибут checked или что-то в этом роде.
Если возможные значения не определены, нулевые, «» и т. д., я бы использовал const finalPlaceholder = useMemo(()=>(!placeholder?undefined:placeholder,[placeholder]). Затем FinalPlaceholder можно присвоить свойству заполнителя. Если он заполнен реальным текстом, вы увидите его, в противном случае «неопределенное» будет связано с заполнителем, в результате чего свойство не будет отображаться.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете сделать что-то вроде этого:
const TextInput = ({ placeholder, size, statusStylesInput }) => {
return (
<div className = {['text-field', `text-field-${size}`, statusStylesInput].join(' ')}>
<input
type = "text"
{...(placeholder ? { placeholder } : {})}
/>
</div>
);
};
Если заполнитель пуст, какой текст вы хотите отобразить?