在 React 中的输入字段上设置占位符

作者

在 React 中的输入字段上设置占位符

Set a placeholder on an Input field in React

使用placeholderprop 在 React 中的输入字段上设置占位符，例如<input type="text" placeholder="Your first name" />. 显示输入字段的占位符文本，直到用户在该字段中键入内容。

应用程序.js
export default function App() {
  const placeholder = 'Your message';

  return (
    <div>
      <input type="text" placeholder="Your first name" />

      <input type="number" placeholder="Your fav number" />

      <input type="text" placeholder={placeholder} />

      <input
        type="text"
        placeholder={'hi'.length === 2 ? 'My placeholder' : 'Your placeholder'}
      />
    </div>
  );
}

输入占位符

我们使用prop
在输入字段上placeholder设置
占位符文本。

该placeholder属性是一个字符串，用于向用户提示字段中需要什么样的信息。

例如，对于电子邮件字段，我们可以使用“您的电子邮件”或“例如john-smith@gmail.com”的占位符文本。

前两个示例展示了如何将placeholder输入字段上的属性设置为字符串。

应用程序.js
<input type="text" placeholder="Your first name" />

<input type="number" placeholder="Your fav number" />

第三个示例使用变量作为占位符文本。

应用程序.js
export default function App() {
  const placeholder = 'Your message';

  return (
    <div>
      <input type="text" placeholder={placeholder} />
    </div>
  );
}

中的花括号placeholder={placeholder}标记必须计算的表达式的开始。

您还可以有条件地placeholder在输入字段上设置道具。

应用程序.js
export default function App() {
  return (
    <div>
      <input
        type="text"
        placeholder={'hi'.length === 2 ? 'My placeholder' : 'Your placeholder'}
      />
    </div>
  );
}

我们使用了一个
与语句
非常相似的三元运算符。if/else

问号之前的部分被评估，如果它返回真值，则运算符返回冒号之前的值，否则返回冒号之后的值。

示例中的三元运算符检查length字符串hi的 是否等于2，如果等于，则返回字符串My placeholder，否则返回Your placeholder。

–

发表评论