React<input>組件中未定義的event.target

我正在使用反應。我正在嘗試動態添加和洗掉輸入欄位。我正在嘗試制作一個物件串列，例如

    [
    {"item": 1, "key": "RAM", "value": "8GB"},
    {"item": 1, "key": "Color", "value": "Black"},
    {"item": 1, "key": "Used For", "value": "6 months"},
    ]

上述串列中可以有任意數量的物件。我想發送帶有上述資料的發布請求。我面臨的問題是創建上述模式。我想創建一個Add按鈕，它將并排顯示key和的兩個輸入欄位。value然后我想在用戶輸入值時將它們添加到上面的串列中。不要擔心，item因為它總是一樣的。這是一個CodeSandBox 鏈接。請展開 CodeSandBox 中的瀏覽器選項卡以查看完整頁面。

我做了以下事情：

App.js

    import React, { useState } from "react";
    import {
      SpecificationFormContainer,
      SpecificationFormCard,
      SpecificationFormTitle,
      SpecificationInputRow,
      SpecificationValue,
      AddMoreButton,
      RemoveButton
    } from "./Elements";
    import "./styles.css";
    
    export default function App() {
      const [numberOfSpecFields, setNumberOfSpecFields] = useState(0);
      const [specificationKeys, setSpecificationKeys] = useState("");
      const [specificationValues, setSpecificationValues] = useState("");
      const [specifications, setSpecifications] = useState([]);
    
      const handleSpecKeyChange = (event) => {
        setSpecificationKeys(event.target.value);
      };
    
      const handleSpecValueChange = (event) => {
        setSpecificationValues(event.target.value);
      };
    
      const handleFocusOut = (event, index) => {
        console.log(event);
        if (event.target.value === "") {
          console.log("String Empty");
          return;
        }
      };
    
      return (
        <SpecificationFormContainer>
          <SpecificationFormCard>
            <SpecificationFormTitle>Add Specifications</SpecificationFormTitle>
            <form>
              {[...Array(numberOfSpecFields)].map((e, index) => {
                return (
                  <SpecificationInputRow key={index}>
                    <SpecificationValue
                      placeholder="Key"
                      onChange={handleSpecKeyChange}
                      name="key"
                      onBlur={() => {
                        handleFocusOut(index);
                      }}
                    />
                    <SpecificationValue
                      placeholder="Value"
                      onChange={handleSpecValueChange}
                      name="value"
                      onBlur={() => {
                        handleFocusOut(index);
                      }}
                    />
                  </SpecificationInputRow>
                );
              })}
            </form>
            <AddMoreButton
              onClick={() => {
                setNumberOfSpecFields((prev) => prev   1);
              }}
            >
              Add
            </AddMoreButton>
            {numberOfSpecFields > 0 && (
              <RemoveButton
                onClick={() => {
                  setNumberOfSpecFields((prev) => prev - 1);
                }}
              >
                Remove
              </RemoveButton>
            )}
          </SpecificationFormCard>
        </SpecificationFormContainer>
      );
    }

Elements.js

    import styled from "styled-components";
    
    export const SpecificationFormContainer = styled.div`
      width: 100%;
      border: 2px solid blue;
      padding: 1em;
      display: flex;
      justify-content: center;
      align-items: center;
    `;
    
    export const SpecificationFormCard = styled.div`
      background-color: rgba(0, 0, 0, 0.1);
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      /* min-height: 15em; */
      min-width: 50em;
    `;
    
    export const SpecificationFormTitle = styled.div`
      width: 100%;
      font-size: large;
      text-align: center;
    `;
    
    export const SpecificationInputRow = styled.div`
      width: 100%;
      display: flex;
      justify-content: center;
    `;
    
    export const SpecificationValue = styled.input`
      width: 40%;
      padding: 0.5em;
      margin: 0.5em;
    `;
    
    export const AddMoreButton = styled.button`
      width: 7em;
    `;
    
    export const RemoveButton = styled.button`
      width: 7em;
    `;

在handleFocusOut函式中，事件是0。我正在考慮根據索引key value在函式中使用該對創建一個物件，handleFocusOut因為鍵和值輸入對具有相同的索引。

我想知道為什么這不起作用以及如何使它起作用。很可能有更好的方法來做到這一點，因為這種方法可能不是最好的，因為我只是一個初學者。所以，如果有更好的方法來實作這一點，我想知道。

uj5u.com熱心網友回復：

在 handleFocusOut 函式中，事件為 0。

這是0因為您index作為引數傳遞而忽略了event. 您也可以使用咖喱函式來接受eventand index。

const handleFocusOut = (index) => (event) => {
   // do stuff
};

onBlur={handleFocusOut(index)}

或者直接在 JSX 中添加一個函式：

onBlur={(event) => handleFocusOut(event, index)}

標籤：javascript反应jsx

上一篇：在回圈中使用useRef添加事件偵聽器

下一篇：從搜索欄中洗掉單詞時，獲取自動建議下拉選單的問題消失了