单击CLOSS BTN时，如何清空数组的输入字段？

Question

我有一个弹出窗口，可以在其中添加属性无限。问题是当我单击“关闭”按钮时，数据阵列正在更新，但在输入字段中它并没有空置。我是一个新手可以做出反应。请我找到解决方案。

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>
  );
}

预先感谢。

Answer 1

这里的问题是您正在使用 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>
  );
}