您如何在语义反应 ui 搜索中放置默认消息？答案

【问题标题】：How do you place default message in the semantic react ui search?您如何在语义反应 ui 搜索中放置默认消息？
【发布时间】：2017-10-13 14:41:53
【问题描述】：

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

下面是语义反应 ui 搜索小部件的图像。在第二张图片中，我想知道如何放置提示消息以向用户指示有关搜索栏用途的消息。在这种情况下，它是“搜索”。当用户输入时，它会删除搜索并开始反映用户输入的内容。我以为它会是 defaultValue，但似乎你不能同时设置 value 和 defaultValue。当用户输入框时，我仍然希望能够读取设置的值。

谢谢，德里克

【问题讨论】：

标签： searchbar semantic-ui-react

【解决方案1】：

你可以在组件中使用defaultValue作为初始值，没问题。然后在事件（例如 onBlur）中读取用户输入的 value，如下所示：

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 搜索

【讨论】：

我认为这行不通codepen.io/anon/pen/EweQjP?editors=1111。它不是真正的默认值，而不是给用户的消息/提示。问题是 onBlur 并没有告诉你太多，因为用户可以输入并离开并输入更多内容。您可以使用 onSearchChange，但是当您随时使用默认消息设置值时，触发它为空的原因是什么。默认消息被视为真实值。可以使用标志，但这似乎也很hacky。此外，您还希望提示消息与搜索栏的输入消息有不同的样式
我明白了，用占位符属性测试：
哇，效果很好.....不认为它受支持，因为我在文档中没有看到它。谢谢！文档需要更新