检查 JSX 中的空字符串

Question

React/JSX 有没有办法检查用户输入的字符串是否为空？

Component.js

{((this.props.description.name ==" ")||(this.props.description.name.length==""))?

当用户不输入任何内容或输入 1 space 长的空字符串时，此条件有效，但如果空字符串超过 1 space 长，则失败。 JSX 是否有检查这个的技巧，或者我应该在我的 reducer 中处理这个？

Answer 1

您可以轻松地 trim 文本并与空字符串进行比较。让我们试试：

{((this.props.description.name.trim() =="") || (this.props.description.name.trim().length==0))

看看它是如何工作的。我看到你提醒 Reducer 了？你正在使用 Redux，不是吗？如果你使用 Redux，为了处理表单数据，你可以使用 Redux Form (https://github.com/erikras/redux-form) 来节省你的时间。

Answer 2

您可以检查修剪过的字符串：

{this.props.description.name.trim() == ""}

这会修剪字符串（删除空格和换行符），然后检查它是否为空字符串。这是一个 CodePen 演示。

Check for empty string in JSX