React-Change组件内部的defaultValue输入

Question

import "./header.css"
import React, { useState } from 'react';
import FormItem from './formItem'

export default (props) =>  {

const cardItemDefault = {
    skin: '',
}

const [cardsItems, setCardsItems] = useState([])

const handleAddCardItem = () => {
    setCardsItems([...cardsItems, cardItemDefault])
}
const handleRemoveCardItem = (index) => {
    const values = [...cardsItems]
    values.splice(index, 1)
    setCardsItems([...values])
}

const handleChangeInput = (index, event) => {
    const values = [...cardsItems]
    values[index].skin = event.target.value
    setCardsItems([...values])
}
const handleAddCopyCard = (index) => {
    const values = [...cardsItems]

    const copyCard = {
        skin: values[index].skin,
    }
    
    values.splice(index+1, 0, copyCard)
    setCardsItems([...values])
    
}
return (
    <>  
        <nav className="NavbarItems">
            <div className="marca">
                <div className="menu-icon">
                    <img src="https://cdn.discordapp.com/attachments/825108658622955520/834516008982151178/image0.png" alt="catIcon"/>
                </div>
                <h1 className="navbar-logo">My project</h1>
            </div>            
            <ul className="nav-menu">
                <li>
                    <button className="button-addformItem" onClick={() => handleAddCardItem()}>Add</button>
                </li>
            </ul>
        </nav>
        <div className="container">
            <div className="cards-items">
                {cardsItems.map( (cardItem, index) => {
                    return (
                        <FormItem
                            key={index} 
                            idItem={index}
                            skinCardItem={cardItem.skin}
                            onHandleRemoveCardItem={() => handleRemoveCardItem(index)}
                            onHandleChangeInput={(event) => handleChangeInput(index, event)}
                            onHandleClickCopy={() => handleAddCopyCard(index)}
                        />
                    )
                })}
            </div>
        </div>    
    </>
)

import "./formItem.css"
import React from 'react'

export default (props) => {

return (
    <div className="card-formItem">
        <div className="container-formItem">
            <div className="header-formItem">
                <i 
                    className="fas fa-times fa-2x remove-item-button"
                    id={"remove-item-button" + props.idItem}
                    title='Remover item' 
                    onClick={props.onHandleRemoveCardItem}
                />
            </div>

            <div className="formItem">
                <div className="skin-input">
                    <input name="skin"
                        type="text" 
                        placeholder="Skin"
                        defaultValue={props.skinCardItem}
                        onBlur={(event) => props.onHandleChangeInput(event)}
    
                    />
                </div>
            </div>  

        </div>
        <i 
            className="far fa-copy fa-2x copy-button"
            id={"copy-button" + props.idItem}
            onClick={() => props.onHandleClickCopy()}>
        </i>
    </div>
)
}

Answer 1

主要问题是所有卡的状态都存储在父组件中的一个位置。这意味着任何时候任何输入改变，所有的卡片都将重新呈现。您需要彻底重新考虑如何在这里存储状态。我不打算为您编写代码，但以下是您需要做的：

• 将值和onchange内容移动到FormItem组件中。每个表单项都应该负责自己的值和事件处理程序。
• 创建一个“form context”来环绕所有表单项（在这里阅读react context）。您应该能够将所有的值保存到这个上下文中，以及任何用于克隆的帮助函数等等。这对于克隆项和收集所有输入的所有值都很有用。
• 找到更好的方法为表单项分配“键”。即使添加了新的表单项，也应将相同的键分配给相同的表单项。使用索引是不够好的。假设你有3个表单项目，你克隆中间的一个，最后一个表单项目将获得一个新的关键字，而它真的不应该。您需要为每个表单项生成一个“ID”，并确保ID紧跟在表单项之后，即使添加了新的表单项。

祝你好运.