如何存储输入字段中的当前值并添加新值？答案

【问题标题】：How do I store current value from input fields and add new ones?如何存储输入字段中的当前值并添加新值？
【发布时间】：2021-02-26 00:19:48
【问题描述】：

我正在学习 React，并正在尝试制作一个待办事项列表，人们可以在其中从两个输入创建待办事项卡。一个标题，一个内容。

此代码成功创建了一张卡片。现在我试图弄清楚如何存储当前值，重置两个输入字段并创建更多卡片而不删除现有的beeing。

关于如何做到这一点的任何想法？

我意识到我需要对 setSubmitted 做一些事情，还需要创建一个数组或对象来存储我的标题和内容变量。只是不确定如何。

function App() { 
  
  const [title, setInputFromTitle] = useState("");
  const [content, setContent] = useState("");
  const [Submitted, setSubmitted] = useState(false);

  function updateState(e) {
    setInputFromTitle(e.currentTarget.value);
  }

  function updateContent (e) {
    setContent(e.currentTarget.value);
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    setSubmitted(true)
     }

return (
<div className="App">
    <Header />
      <Form updateState={updateState} handleSubmit={handleSubmit} updateContent={updateContent} content={content} title={title} />
  <section className="wrapper_cards">
      {Submitted ?
            <article>
            <h4>{title}</h4>
            <p>{content}</p>
            <button className="button_cards">Complete</button>
        </article>
         : null }
  </section>
    </div>
  );

}

这是表单组件：

const Form = ({updateState, handleSubmit, updateContent, content, title}) => {
    return (
        <>
        <form onSubmit={handleSubmit} className="form" method="post" action="#">
            <label htmlFor="title1">Title</label>
            <input className="title1" placeholder="Add title" value={title} onChange={updateState} name="title1" rows="1" cols="20"></input>
            <label htmlFor="content1">Content</label>
            <textarea className="content1" placeholder="Add text" value={content} onChange={updateContent} name="content1" type="text" rows="6" cols="60"></textarea>
            <button type="submit" className="add">Add</button>
        </form>
        
        
        </>
    )
}

【问题讨论】：

标签： reactjs forms

【解决方案1】：

这不是错误，只是为了你的学习。

function App() { 
  
  const [title, setInputFromTitle] = useState("");
  const [content, setContent] = useState("");
  const [data, setData] = useState([]);

  function updateState(e) {
    setInputFromTitle(e.currentTarget.value);
  }

  function updateContent (e) {
    setContent(e.currentTarget.value);
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    setData([...data, {title, content}])
    setContent("");
    setInputFromTitle("");
     }

return (
<div className="App">
    <Header />
      <Form updateState={updateState} handleSubmit={handleSubmit} updateContent={updateContent} content={content} title={title} />
  <section className="wrapper_cards">
      {data.length > 0 &&
            data.map(item => {
                <article>
                  <h4>{item.title}</h4>
                  <p>{item.content}</p>
                  <button className="button_cards">Complete</button>
                </article>
             })}
  </section>
    </div>
  );

}

【讨论】：