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"/>

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

1 个答案: