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

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;

所以我这里有一个功能组件，我让 useState 在每次单击按钮时设置 'value' 的值。这样可行。将多个值添加到我的数组中是行不通的。我已经尝试了很多方法，比我想列出的更多...
我想要一个数组，比方说，有 7 项要做的事情，然后我将把它们作为道具传递给并让那个组件在 DOM 上附加一张新卡片，说明待办事项......在输入提交后直接。 ..
在 vanilla JS 中，我通过使用 document.createElement('div').innerHTML = <p>${input.value}</p> （总结）实现了这一点但我无法弄清楚如何在反应中做到这一点......任何帮助，主要包括我误解 React 用法的地方，太棒了！

Answer 1

只有 re-render 会在组件状态更改时发生。

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

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

然后您可以添加新的待办事项，如下所示：

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 state 来完成这样的任务：

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;

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

React; how to gather user state input and append to new component on submit

javascript

reactjs

react-hooks

react-functional-component