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 將無法獲取它。