javascript - 如何编辑待办事项列表中的两个输入

Question

我正在制作一个带有 2 个输入的列表 todo，但是我在编辑这个 todo 时遇到了问题。为了便于理解，我将留下我的代码、图像和代码框链接。

App.js：

import React, { useState } from "react";
import Form from "./Form";
import Modal from "./Modal";
import { v4 as uuidv4 } from "uuid";

export default function App() {
  const [value, setValue] = useState("");
  const [value2, setValue2] = useState("");
  const [todos, setTodos] = useState([]);

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

  const getValue2 = (event) => {
    setValue2(event.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setTodos([...todos, { title: value, content: value2, id: uuidv4() }]);
  };

  return (
    <div>
      <Form
        valueProp={value}
        valueProp2={value2}
        onChangeProp={getValue}
        onChangeProp2={getValue2}
        typeProp="submit"
        handleSubmitProp={handleSubmit}
      />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {console.log(todo)}
            <Modal title={todo.title} content={todo.content} id={todos.id} />
          </li>
        ))}
      </ul>
    </div>
  );
}

Form.js：

import React from "react";

export default function Form({
  valueProp,
  valueProp2,
  typeProp,
  onChangeProp,
  onChangeProp2,
  handleSubmitProp
}) {
  return (
    <div>
      <form onSubmit={handleSubmitProp}>
        <input value={valueProp} onChange={onChangeProp} />
        <input value={valueProp2} onChange={onChangeProp2} />
        <button type={typeProp}>ENTER</button>
      </form>
    </div>
  );
}

Modal.js：

import React, { useState } from "react";
import Edit from "./Edit";
export default function Modal({ title, content }) {
  const [showEdit, setShowEdit] = useState(false);

  const changeShow = () => {
    setShowEdit(!showEdit);
  };
  return (
    <div>
      <p>{title}</p>
      <p>{content}</p>
      <button onClick={changeShow}>EDIT</button>
      {showEdit && <Edit />}
    </div>
  );
}

Edit.js：

import React from "react";
import './edit.css'

export default function Edit() {
  return (
    <div>
      <input />
      <input />
      <button>CHANGE</button>
    </div>
  );
}

我的目标是将值写入Edit.js输入并单击“更改”，以便先前呈现的值更改为我在这些输入中写入的值。 我的问题示例（图片）

随意查看codesandbox中的代码： https ://codesandbox.io/s/modest-bas-nri8n

标签： javascriptreactjsformsinput