Я могу создать поле ввода со списком данных в html5 с Reactjs .Код реагирования выглядит следующим образом:
const Container = props => {
const countryList = props.countries.map(c => <option key={c} value={c} />);
return (
<div>
<input list="countries" name="Country" />
<datalist id="countries">{countryList}</datalist>
</div>
);
};
Этот код доказал свою корректную работу, скажем, поле ввода есть, и если пользователь введет что-то в поле, отобразится соответствующий список.Проблема в том, что поле ввода пусто без метки.Таким образом, необходим индикатор для описания того, о чем это поле, например, можно добавить метку слева или сверху поля ввода, но это займет больше места на странице.
Поэтому, Я хотел бы добавить какой-нибудь светлый текстовый индикатор / метку внутри поля ввода, и когда пользователь щелкнет это поле ввода, текстовый индикатор исчезнет, и пользователь сможет вставить значение, а также получить список данных
Кто-нибудь может дать несколько советов о том, как достичь этой цели?