如何在通过数据列表归档的输入中设置标签值

Question

我可以使用Reactjs在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>
  );
};

事实证明，此代码可以正常工作，例如输入字段在其中，如果用户在该字段中键入内容，则会显示相关列表。 问题是输入字段为空，没有任何标签。 因此，需要一个用于指示字段内容的指示器，例如，可以在输入字段的左侧或顶部添加标签，但这会在页面上占用更多空间。

因此， 我想在输入字段中添加一些浅色文本指示符/标签，当用户单击此输入字段时，文本指示符将消失，用户可以插入值并获取数据列表

任何人都可以对如何实现这一目标提出一些建议？

Answer 1

<input list="countries" name="Country" placeholder="sometext"/>