Question

这里的Javascript（reactjs）初学者，我使用react挂钩制作了一个非常简单的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

新增了两个：

我们需要将something设置为数组
使用新值concat 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;

Answer 2

基本上，您需要将所有输入存储在数组而不是字符串中。然后使用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>

Todolist反应挂钩

2 个答案: