反应；如何收集用户状态输入并在提交时附加到新组件

Question

import './App.css';
import GoalBox from './Components/GoalBox';
import { useState, useEffect, useRef } from 'react';



function App() {
  const [value, setValue] = useState('')

  const inputReset = useRef(null)

  let arr = [];

  const submitValue = () => {
    const todoList = {
      'todo': value
    }
    console.log(todoList);
    inputReset.current.value = ''; // resets input field
    
    arr.push(todoList)
    console.log('todo array', arr)
  }

  return (
    <div className="App">
      <h1>List of things to do</h1>
      <input ref={inputReset} onChange={(e) => setValue(e.target.value)} />
      <button onClick={submitValue}>Add New To do</button>
    </div>
  );
}

export default App;

＆nbsp;＆nbsp;＆nbsp;＆nbsp;所以我在这里有一个功能组件，并且在每个按钮时，我都会设置“值”的值。有效。不起作用的是在我的数组中获得多个值。我尝试了很多方法，比我想列出的更多...
＆nbsp;＆nbsp;＆nbsp; nbsp;我想要一系列可以做的7件事要做，然后我将其作为道具将其传递给，并让该组件用新卡附加到DOM，并用新的卡表示TODO项目...直接输入提交后...
在Vanilla JS中，我简单地使用document.createlement（'div'）。innerhtml = ＆lt; p＆gt; $ {input.Value} >（总结） 但是我无法弄清楚如何在反应中做到这一点……任何帮助，主要包括我在误解反应用法的地方都将是如此之好！

Answer 1

当组件状态更改时，只有重新渲染才会发生。

它不使用局部变量（让ARR = [];），它应该是另一个反应状态钩子：

const [arr, setArr] = useState([]);

然后您可以添加新的todos：如下：

setArr((prevArr) => [...prevArr, todoItem]);

function App() {
  const [value, setValue] = React.useState("");

  const inputReset = React.useRef(null);

  const [arr, setArr] = React.useState([]);

  const submitValue = () => {
    const todoItem = {
      todo: value
    };
    setArr((prevArr) => [...prevArr, todoItem]);
    inputReset.current.value = ""; // resets input field
  };

  return (
    <div className="App">
      <h1>List of things to do</h1>
      <input ref={inputReset} onChange={(e) => setValue(e.target.value)} />
      <button onClick={submitValue}>Add New To do</button>
      {arr.map(({ todo }) => (
        <div key={todo}>{todo}</div>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Answer 2

您可以使用React状态来完成此类任务：

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

function App() {
  const [value, setValue] = useState('')
  const [arr, setArr] = useState([]);

  const submitValue = () => {
    setValue(""); // resets input field
    setArr([...arr, { todo: value }]); // Use shallow copy to give a new ref
  }

  return (
    <div className="App">
      <h1>List of things to do</h1>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button onClick={submitValue}>Add New To do</button>
      {arr.map(({todo}) => <p key={todo}>{todo}</p>)}
    </div>
  );
}

export default App;