ReactJS中修改代码实现表单提交后才在同页显示数据

当前代码里，<p>{data.paragraph}</p>直接绑定了输入框的实时状态，所以输入时内容会立刻显示。要实现仅提交后展示，需要拆分状态，用独立变量存储提交后的内容：

具体修改步骤 #

• 新增状态变量submittedParagraph，用于保存提交后的文本，初始值为空字符串
• 提交表单时，将输入框的临时内容（data.paragraph）赋值给submittedParagraph
• 页面展示时，渲染submittedParagraph而非data.paragraph

修改后的完整代码 #

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

function App() {
  // 存储输入时的临时内容
  const [data, setData] = useState({ paragraph: "" });
  // 存储提交后的内容，初始为空
  const [submittedParagraph, setSubmittedParagraph] = useState("");

  const handleChange = (e) => {
    setData({
      ...data, 
      [e.target.name]: e.target.value
    });
  };

  const submitHandler = (e) => {
    e.preventDefault();
    // 提交时把临时内容存入提交状态
    setSubmittedParagraph(data.paragraph);
    console.log(data);
  };

  return (
    <div className="App">
      <form onSubmit={submitHandler}>
        <label>Enter the paragraph</label>
        <textarea 
          name="paragraph" 
          type="text" 
          onChange={handleChange} 
          value={data.paragraph} 
          rows={3} 
          cols={30}
        />
        <button type='submit'>Submit</button>
      </form>
      {/* 只渲染提交后的内容 */}
      {submittedParagraph && <p>{submittedParagraph}</p>}
    </div>
  );
}

export default App;

额外优化（可选） #

如果需要提交后清空输入框，可在submitHandler中添加一行：

setData({ paragraph: "" });

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