問題從元素串列中洗掉特定的Reactjsx元素

第一次提問哈哈，我試圖從我的元素陣列中洗掉一個特定的 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;

如果我發布錯誤，我會提前道歉。謝謝您的幫助

uj5u.com熱心網友回復：

我認為您已經使這完全比所有索引值存盤都處于狀態所需的復雜。在 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>
  );
}

標籤：javascript 反应 jsx

上一篇：ReactApp突然停止作業；型別錯誤：無法讀取未定義的屬性（讀取“原型”）

下一篇：python-檢查字串是否匹配模式的正則運算式