问题从元素列表中删除特定的 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 存储在状态中也是反模式，您应该将数据存储在状态中并将数据渲染到 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>
  );
}

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

Issue Removing specific React jsx element from list of elements

javascript

jsx

reactjs