React开发：点击按钮存储输入到数组并展示（禁用三元运算符）

原代码存在两个核心问题：一是输入框的onChange事件会直接把输入内容追加到数组，导致每次输入字符都会新增一项；二是clicked函数返回的元素没有被渲染到页面上，点击按钮后看不到内容。以下是符合需求的修正代码：

import './App.css';
import { useState } from 'react';

function App() {
  // 保存输入框的实时内容
  const [inputValue, setInputValue] = useState('');
  // 保存要展示的内容
  const [displayContent, setDisplayContent] = useState(null);

  const handleClick = () => {
    // 用if语句判断输入是否为空
    if (inputValue.trim()) {
      // 输入有内容时，设置要展示的段落元素
      setDisplayContent(<p>{inputValue}</p>);
    } else {
      // 输入为空时，清空展示内容
      setDisplayContent(null);
    }
  };

  return (
    <div className="App">
      {/* 实时更新输入框的值到inputValue状态 */}
      <input 
        type="text"
        value={inputValue}
        onChange={(event) => setInputValue(event.target.value)} 
      />
      {/* 点击按钮触发展示逻辑 */}
      <button onClick={handleClick}>点击展示</button>
      {/* 渲染要展示的内容 */}
      {displayContent}
    </div>
  );
}

export default App;

关键说明： #

• 新增inputValue状态专门存储输入框的实时内容，避免原代码中每次输入字符都追加数组的问题。
• handleClick函数通过if语句判断输入内容是否有效（去除首尾空格后不为空），分别处理展示内容的设置。
• 在组件的返回结构中直接渲染displayContent状态，确保点击按钮后内容能显示在页面上。

内容的提问来源于stack exchange，提问作者Ibrahim