Todolist 反应挂钩

Question

Javascript (reactjs) 初学者，我使用 React hooks 制作了一个非常简单的 todolist 应用程序，现在当用户写一些新东西时，它只是替换旧文本所以我需要你们的建议如何不替换旧文本但保留所有内容，这样我就可以看到用户写了什么（是否可以不使用任何循环或映射功能？（如果需要可以使用））。

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

function App() {
  const [input, setValue] = useState("")
  const [something, setSomething] = useState("")

  const handleInput = (event) => {
    setValue(event.target.value);
  }
  const jotain = (event) => {
    event.preventDefault();
    if (!input) return
    setSomething(input)
    setValue("");
    console.log(input)
  }


  return (
    <div>
      <p> {something} </p>
      <form onSubmit={jotain} >
        <input placeholder="Kirjoita jotain" type="text" value={input} onChange={handleInput} />
      </form>
    </div>
  );
}

export default App;

Answer 1

您基本上需要将所有输入存储在数组而不是字符串中。然后使用 map() 渲染所有保存的待办事项。

const { useState } = React;

function App() {
  const [input, setValue] = useState("")
  const [todos, setTodos] = useState([])

  const handleInput = (event) => {
    setValue(event.target.value);
  }
  
  const jotain = (event) => {
    event.preventDefault();
    if (!input) return
    
    const newTodos = [...todos, input];
    
    setTodos(newTodos);
    setValue("");
  }


  return (
    <div>
      {todos.map((todo, index) => <p key={index}>{todo}</p>)}
      <form onSubmit={jotain} >
        <input placeholder="Kirjoita jotain" type="text" value={input} onChange={handleInput} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

新增两个：

我们需要将something设置为数组
用新值 something 连接

将您提到的相同示例放在没有任何循环或映射的情况下。您可以根据自己的选择映射或设置 something 列表的样式。

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

function App() {
  const [input, setValue] = useState("")
  const [something, setSomething] = useState([])

  const handleInput = (event) => {
    setValue(event.target.value);
  }

  const jotain = (event) => {
    event.preventDefault();
    if (!input) return;
    setSomething(something.concat(<li>{input}</li>))
    setValue("");
    console.log(input)
  }


  return (
    <div>
      <ul> {something} </ul>
      <form onSubmit={jotain} >
        <input placeholder="Kirjoita jotain" type="text" value={input} onChange={handleInput} />
      </form>
    </div>
  );
}

export default App;

Todolist 反应挂钩

Todolist react hooks

html

javascript

arrays

reactjs

map-function