searchbar - 如何在语义 React ui 搜索中放置默认消息？

Question

https://react.semantic-ui.com/modules/search

下面是语义 React ui 搜索小部件的外观图像。在第二张图片中，我想知道如何添加一条提示消息，向用户指示有关搜索栏用途的消息。在本例中，它是“搜索”。当用户输入时，它会删除搜索并开始反射(reflect)用户输入的内容。我以为它会是defaultValue，但似乎你不能同时设置value和defaultValue。我仍然希望能够在用户在框中键入内容时读取设置值。

谢谢，德里克

Answer 1

您可以使用defaultValue作为组件中的初始值，没问题。然后在事件(例如 onBlur)中读取用户输入值，如下所示:

onBlur(e) {
  e.preventDefault();

  console.log(e.target.name, e.target.value);
}

如果您想读取按下的每个新字符的值，您可以在 onSearchChange 事件中使用:

onSearchChange(e) {
  e.preventDefault();

  console.log(e.target.name, e.target.value);
}

编辑:在下面的评论中包含接受的答案:

工作:

placeholder={"text"}

用于语义 React UI 搜索