时间戳

首页 > 解决方案 > setState 在反应和传递道具与功能

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

问题描述

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

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

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

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;

所以......问题是尝试将输入字段的状态从主应用程序传递到组件，我遇到了const newValue = event.target.value;未定义的问题，然后我在组件代码中尝试了这个，<input onChange={(e)=>{ props.onTyping(e) }}它<input onChange={()=>{ props.onTyping() }} 以某种方式工作很好，完美!!!，有人可以解释一下为什么以及如何工作吗？

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

标签： javascriptreactjs

解决方案

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

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

该组件有一个输入字段，该字段由其父组件中的状态 propvalue决定。因此，当您开始在此输入字段中输入内容时，您可能希望更新组件的状态，以便将更改的状态传递给组件。为方便起见，您已将别名作为道具传递。现在，您将此道具绑定到输入字段上的处理程序，该处理程序在您输入字段时触发。所以现在你只需要确保将对象传递给处理程序。这将使用该对象调用您，现在您可以使用并将其设置为您的.inputTextAppinputTextApppropsInputAreahandleChangeonTypingonChangeeventonTypinghandleChangeeventevent.target.valueinputText

你可以改变

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

到

<input onChange={
            props.onTyping
          }

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

推荐阅读