單擊關閉btn時如何清空陣列的輸入欄位？

我有一個彈出視窗，我可以在其中無限添加屬性。但是如果我想編輯或洗掉輸入欄位的特定行，我無法做到。這就是我所做的。問題是當我單擊關閉按鈕時，資料陣列正在更新，但在輸入欄位中它并沒有變空。我是一個反應新手。幫助我找到解決方案。

import React from "react";
import { useState } from "react";
import { useEffect } from "react";

export default function Property(props) {
  const [Data, setData] = useState([{}]);
  const { setProperties } = props;
  useEffect(() => {
    setData(Data)
  },[Data])
  console.log(Data)
  return (
    <div className='PinputBody'>
      <p className='P-body-Heading-text'>
        Properties show up underneath your item, are clickable, and can be
        filtered in your collection's sidebar.
      </p>
      <form className='Property-Input-Area'>
        <div className='property-grid property-input-header'>
          <p className='property-input-header-text'>Type</p>
          <p className='property-input-header-text'>Name</p>
        </div>
        {Data.map((items, index) => (
          <div key={index} className="property-grid property-input">
            <p className="grid-input grid-flex bdl">
              <div className="delete-input">
                <i className="bx bx-x DeleteClose"
                  onClick={() => {
                    let data = Data;
                    data.splice(index, 1);
                    setData(data);
                    props.setData(data)
                    // setName('');
                    // setType('');
                  }}
                ></i>
              </div>
              <input type="text" className="input-delete-field" placeholder="Enter the prop type"
                value={items?.name}
                onChange={(e) => {
                  let data = Data;
                  data[index].name = e.target.value;
                  setType(e.target.value);
                  setData(data);
                  props.setData(data)
                }} />
            </p>
            <p className="grid-input bdr">
              <input type="text" placeholder="Enter the prop name"
                value={items?.value}
              onChange={(e) => {
                let data = Data;
                data[index].value = e.target.value;
                setName(e.target.value);
                setData(data);
                props.setData(data)
              }} />
            </p>
          </div>
        ))}
        <button type="button" className='Add-more-Btn' onClick={() => { setData([...Data, {}]) }}>
          Add More
        </button>
      </form>
    </div>
  );
}

提前致謝。

uj5u.com熱心網友回復：

這里的問題是你正在使用data.splice(index, 1);但你沒有重新分配一個新陣列給它

修復可能是

data = data.splice(index, 1);

如果您不想洗掉它但為空值，您可以這樣做

let data = Data;
data[index] = {name: "", value: ""} //empty your value
const updatedData = data.map((item,currentIndex) => currentIndex === index ? data[index]: item)
setData(updatedData); //assign your new object to the array
props.setData(updatedData)

與您的編輯欄位類似的問題

您還需要為編輯的資料分配一個新物件

data[index] = {name: data[index].name, value: e.target.value}
const updatedData = data.map((item,currentIndex) => currentIndex === index ? data[index]: item)
setData(updatedData); //assign your new object to the array
props.setData(updatedData)

data[index] = {name: e.target.value, value: data[index].value}
const updatedData = data.map((item,currentIndex) => currentIndex === index ? data[index]: item)
setData(updatedData); //assign your new object to the array
props.setData(updatedData)

完整代碼可以

import React from "react";
import { useState } from "react";
import { useEffect } from "react";

export default function Property(props) {
  const [Data, setData] = useState([{}]);
  const { setProperties } = props;
  useEffect(() => {
    setData(Data)
  },[Data])
  console.log(Data)
  return (
    <div className='PinputBody'>
      <p className='P-body-Heading-text'>
        Properties show up underneath your item, are clickable, and can be
        filtered in your collection's sidebar.
      </p>
      <form className='Property-Input-Area'>
        <div className='property-grid property-input-header'>
          <p className='property-input-header-text'>Type</p>
          <p className='property-input-header-text'>Name</p>
        </div>
        {Data.map((items, index) => (
          <div key={index} className="property-grid property-input">
            <p className="grid-input grid-flex bdl">
              <div className="delete-input">
                <i className="bx bx-x DeleteClose"
                  onClick={() => {
                    let data = Data;
                    data[index] = {name: "", value: ""} //empty your value
                    const updatedData = data.map((item,currentIndex) => currentIndex === index ? data[index]: item)
                    setData(updatedData); //assign your new object to the array
                    props.setData(updatedData)
                  }}
                ></i>
              </div>
              <input type="text" className="input-delete-field" placeholder="Enter the prop type"
                value={items?.name}
                onChange={(e) => {
                  let data = Data;
                  data[index] = {name: data[index].name, value: e.target.value}
                  const updatedData = data.map((item,currentIndex) => currentIndex === index ? data[index]: item)
                    setData(updatedData); //assign your new object to the array
                    props.setData(updatedData)
                }} />
            </p>
            <p className="grid-input bdr">
              <input type="text" placeholder="Enter the prop name"
                value={items?.value}
              onChange={(e) => {
                let data = Data;
                data[index] = {name: e.target.value, value: data[index].value}
                const updatedData = data.map((item,currentIndex) => currentIndex === index ? data[index]: item)
                    setData(updatedData); //assign your new object to the array
                    props.setData(updatedData)
              }} />
            </p>
          </div>
        ))}
        <button type="button" className='Add-more-Btn' onClick={() => { setData([...Data, {}]) }}>
          Add More
        </button>
      </form>
    </div>
  );
}

標籤：html 反应

上一篇：懸停卡片正文時如何將卡片正文中的文本向左滾動

下一篇：如何在Bootstrap5中對齊內容