问题从元素列表中删除特定的 React jsx 元素

Question

第一次提问哈哈，我正在尝试从我的元素数组中删除一个特定的 JSX 元素，但我不确定如何识别该元素是被点击删除的元素，所以我想知道是否有人遇到过这个问题之前以及你将如何解决它。

这是输入容器的代码

const InputComponent = (props) => {

    

    return ( 
        <div className="input-container" onClick={e =>console.log(e)}>
            <input className="input-name" type="text" />
            <input className="input-value" type="text" />
            <button className="remove-button" onClick={props.remove}><img src={minusIcon} alt="remove-icon" /></button>
        </div>
     );
}
 
export default InputComponent;

这是父组件管理删除所述元素的代码

const Main = () => {

    const [newInput, setInput] = useState([]);
    const [currentInput, setCurrentInput] = useState([<InputComponent key={0}/>]);

    const [currentIndex, setIndex] = useState(0)
    
    const [currentPlanName, setCurrentPlanName] = useState('Current-Plan');
    const [newPlanName, setNewPlanName] = useState('New-Plan');

    // const [currentInputValue, setCurrentValue] = useState('')

    // const [newInputValue, setNewValue] = useState('')

    // Sets Keys for each New Element in Array
    const [newKey, setNewKey] = useState(0);

    const [currentKey, setCurrentKey] = useState(0)


    // Handle Removal of specific array by using key
    
    const handleCurrentRemoval = () => {

        let newArray = currentInput.filter(element => element.key !== )

        console.log(newArray)
        setCurrentInput(newArray)

    }

    // Initialize Keys for each Array
    const currentArrayElement = {
        element: <InputComponent key={currentKey} remove={handleCurrentRemoval} />,
        index: currentKey

    };

    const newArrayElement = <InputComponent key={newKey+1}/>





    // Adds new Element to array
    const handleCurrentClick = () => {

        setCurrentInput(prevValues => [...prevValues, currentArrayElement.element])
        setCurrentKey(currentKey+1);
        console.log(currentArrayElement)
        console.log(currentInput)

    };

    const handleNewClick = () => {

        setInput(prevValues => [...prevValues, newArrayElement])
    };

    // const handleRemoveClick = (value) => {
    //     currentInput.filter(current => value !=)
    // }


    return ( 
        <div className="main-container">
            <div className="quote-container">

                <div className="current-plan">
                    <h2>{currentPlanName}</h2>
                    {
                        currentInput.map((inputs) => {
                            return inputs
                        })
                    }
                    <div className="button-container">
                        <button className="add-input" onClick={handleCurrentClick}><img src={addIcon} alt="add"/></button>
                    </div>
                    
                </div>
                
                <div className="new-plan">
                    <h2>{newPlanName}</h2>
                    {
                        newInput.map((inputs) => {
                            return inputs
                        })
                    }

                    <div className="button-container">
                        <button className="add-input" onClick={handleNewClick}><img src={addIcon} alt="add"/></button>
                    </div>
                </div>
            </div>
    
        </div>
     );
}
 
export default Main;

如果我发布不正确，我会提前道歉。 感谢您的帮助

Answer 1

我认为您已经使这完全比在状态中存储所有索引值所需的复杂程度要高。在 React 中将 JSX 存储在 state 中也是反模式，你应该将数据存储在 state 中并将数据渲染到 JSX。

我建议将生成的输入 ID 存储在数组中，并将它们映射到 JSX。

例子：

// id generator
let id = 0;
const getId = () => id++;

export default function App() {
  const [newInput, setInput] = useState([]);
  const [currentInput, setCurrentInput] = useState([]);

  const [currentPlanName, setCurrentPlanName] = useState("Current-Plan");
  const [newPlanName, setNewPlanName] = useState("New-Plan");

  // Handle Removal of specific element by using id
  const handleCurrentRemoval = (removeId) => {
    setCurrentInput((ids) => ids.filter((id) => id !== removeId));
  };

  // Adds new id to array
  const handleCurrentClick = () => {
    setCurrentInput((ids) => ids.concat(getId()));
  };

  const handleNewClick = () => {
    setInput((ids) => ids.concat(getId()));
  };

  const handleRemoveClick = (removeId) => {
    setInput((ids) => ids.filter((id) => id !== removeId));
  };

  return (
    <div className="main-container">
      <div className="quote-container">
        <div className="current-plan">
          <h2>{currentPlanName}</h2>
          {currentInput.map((id) => {
            return (
              <InputComponent
                key={id}
                remove={() => handleCurrentRemoval(id)}
              />
            );
          })}
          <div className="button-container">
            <button className="add-input" onClick={handleCurrentClick}>
              <img src={addIcon} alt="add" />
            </button>
          </div>
        </div>

        <div className="new-plan">
          <h2>{newPlanName}</h2>
          {newInput.map((id) => {
            return (
              <InputComponent key={id} remove={() => handleRemoveClick(id)} />
            );
          })}

          <div className="button-container">
            <button className="add-input" onClick={handleNewClick}>
              <img src={addIcon} alt="add" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}