反应如何为空框设置计数文本值 0

Question

现在我的空文本框显示计数 1。请参见下面的屏幕截图：

我想为空框显示 0 值。怎么做？这是我的代码：

export default function TextFrom(props) {
  const handelUpClick = () => {
    let newtext = text.toUpperCase();
    setText(newtext);
  };

  const handelLoClick = () => {
    let newtext = text.toLowerCase();
    setText(newtext);
  };

  const handleOnChange = (event) => {
    setText(event.target.value);
  };

  const [text, setText] = useState("");

  return (
    <>
    ..my html code
     <h1>your text summary</h1>
        <p>
          {text.split(" ").length} words and {text.length} character
       </p>
    <>

Answer 1

这里的问题是 split returns [""] 在空字符串上调用时，该数组的长度确实是 1。为了解决这个问题，您可以替换{text.split(" ").length} 部分代码带有 {text.trim() === '' ? 0 : text.split(" ").length}，以便处理输入仅为空格的情况。

反应如何为空框设置计数文本值 0

React how set count text value 0 for empty box

javascript

reactjs

react-redux

react-hooks