import React from "react";

export default function Form ({handleSubmit, handleChange, value}) {
  return (
    <form onSubmit = {handleSubmit}>
    <label>
      <input type="text" name="name" onChange = {handleChange}/>
    </label>
    <input type="submit" value="Submit" />
  </form>
  );
}

我正在尝试创建一个基本的Todolist应用程序。我在您将用户输入呈现到我的TODOList组件中的部分卡住了。当我提醒e.target.value的值时，我得到了未定义。问题出在哪里？编辑：添加了我的表单组件。

import "./styles.css";
import Header from "./Header.js";
import Form from "./Form.js";
import {useState} from "react";
import ToDoList from "./ToDoList.js"

export default function App() {
  const[items, setItems] = useState([]);
  let value = "";
  function handleChange(e) {
    value = e.target.value;
  }

  function handleSubmit(e) {
    setItems([...items,
      e.target.value
    ]);
    alert('A name was submitted: ' + e.target.value); 
    e.preventDefault();
  }

  return (
    <div className="App">
      <div> 
      <Header/>
      </div>
      <div> 
        <Form handleChange = {handleChange} handleSubmit = {handleSubmit} value = {value}/>
      </div>
      <div> 
        <ToDoList items = {items}/>
      </div>  
    </div>
  );
}

顺晟科技：

因为您将整个表单作为事件传递给handleSubmit和items。如果要保持这种代码样式，则必须使用输入值更改。此外，在执行所有操作之前，您必须定义e.preventDefault()。所以：

import "./styles.css";
import Header from "./Header.js";
import Form from "./Form.js";
import {useState} from "react";
import ToDoList from "./ToDoList.js"

export default function App() {
  const[inputValue, setInputValue] = useState();
  const[items, setItems] = useState([]);
  let value = "";
  function handleChange(e) {
    setInputValue(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    setItems([...items,
      inputValue
    ]);
    setInputValue("");
    alert('A name was submitted: ' + e.target.value); 
    
  }

  return (
    <div className="App">
      <div> 
      <Header/>
      </div>
      <div> 
        <Form handleChange={handleChange} handleSubmit={handleSubmit} value = {value}/>
      </div>
      <div> 
        <ToDoList items = {items}/>
      </div>  
    </div>
  );
}