setState 在反应和传递道具与功能

Question

我是新手，刚进入道具和传递函数领域，我的任务是让应用程序与给定组件一起工作，我试图修复它，当你修复某些东西时，我遇到了其中一个时刻你现在不知道发生了什么:)

问题是削减部分主要代码并制作另一个组件：

这是主要的应用程序代码：

import React, { useState } from "react";
import ToDoItem from "./ToDoItem";
import InputArea from "./InputArea";

function App() {
  const [inputText, setInputText] = useState("");
  const [items, setItems] = useState([]);

  function handleChange(event) {
    const newValue = event.target.value;
    setInputText(newValue);
  }

  function addItem() {
    setItems(prevItems => {
      return [...prevItems, inputText];
    });
    setInputText("");
  }

  function deleteItem(id) {
    setItems(prevItems => {
      return prevItems.filter((item, index) => {
        return index !== id;
      });
    });
  }

  return (
    <div className="container">
      <div className="heading">
        <h1>To-Do List</h1>
      </div>
      <InputArea 
      inputText={inputText}
      onTyping={handleChange}
      addItem={addItem}
      />
      <div>
        <ul>
          {items.map((todoItem, index) => (
            <ToDoItem
              key={index}
              id={index}
              text={todoItem}
              onChecked={deleteItem}
            />
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

这是组件代码：

import React from "react";

function InputArea(props) {
  return (
    <div className="form">
      <input onChange={(e)=>{
        props.onTyping(e)
      }} type="text" value={props.inputText} />
      <button onClick={()=>{
        props.addItem()
      }}>
        <span>Add</span>
      </button>
    </div>
  );
}

export default InputArea;

所以...问题是尝试将输入字段的 state 从主应用程序传递到组件，我遇到了const newValue = event.target.value;的问题。 没有定义，然后我在组件代码<input onChange={(e)=>{ props.onTyping(e) }}之前尝试了这个<input onChange={()=>{ props.onTyping() }}并且不知何故它工作得很好，很完美，？！有人可以解释它为什么以及如何工作吗？

PS：我不擅长写问题，所以请对问题发表任何评论有助于改进我的结构，谢谢。

Answer 1

React 具有单向数据绑定，这意味着 state 本身就是真正的变化源。 您不能更改输入字段中的某些内容并期望它自动更新该字段使用的 state（这种魔法发生在 Angular-双向数据绑定中）。 考虑到这一点，让我们看看你的代码： -

  <InputArea 
  inputText={inputText}
  onTyping={handleChange}
  addItem={addItem}
  />

该组件有一个输入字段，其value由inputText属性决定，该属性是其父组件App中的 state。 因此，当您开始在此输入字段中输入内容时，您可能希望更新App组件的inputText state，以便将更改后的props传递给InputArea组件。 为方便handleChange ，您已将别名为 onTyping 的onTyping作为道具传递。 现在，您将此道具绑定到输入字段上的onChange处理程序，该处理程序在您输入字段时触发。 所以现在你只需要确保将event object 传递给onTyping处理程序。 这将使用该event object 调用您的handleChange ，现在您可以使用event.target.value并将其设置为您的inputText 。

你可以改变

 <input onChange={(e)=>
            props.onTyping(e)
          }

至

<input onChange={
            props.onTyping
          }

它会以同样的方式工作。 在第二种风格中， event object 被隐式传递。

Answer 2

如果您查看 onTyping function 是什么，它是对 handleChange function 的引用。 如果您查看 handleChange function 的定义，您会发现它接受了一个event参数。 在您的行中不起作用：

<input onChange={()=>{ props.onTyping() }}

你没有传递任何东西——括号里什么都没有——所以这行在handChange function：

const newValue = event.target.value;

将 newValue 设置为 undefined，因为未传入event 。

您的新行添加了 e 或事件作为参数，因此它可以工作。 该事件确实是默认生成的，但是您需要将该事件作为参数传递，否则 function 将无法获取它。