当前位置: 首页 > 知识库问答 >
问题:

React-Change组件内部的defaultValue输入

卫弘懿
2023-03-14
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>
)
}

共有1个答案

辛龙野
2023-03-14

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

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

祝你好运.

 类似资料:
  • 我遇到了一个奇怪的问题,我不知道是怎么回事。我以前使用完全相同的代码,但现在它的行为不同了。也许我忽略了什么。我想要的:为了我的问题:我想呈现一个有三个选项的选择输入。其中一个选项是“Disabled DefaultValue”选项,它应该是占位符。其他两个选项都有一个值,而select的值是我要传递给它的状态。 所以我将表单呈现为这样的形式(我在这里保持简短,以便有一个干净的外观): 似乎选项中

  • 请考虑以下示例: 我希望将值传递到中,作为哑输入组件的道具。然而,它从不重新呈现它。

  • 我使用的是React Router v4的最新版本,我试图在div中呈现我的页面组件Home/About,但我遇到的问题是,如果我将路由添加到我的头中,它将切换路由,但它们将显示Home/About组件作为头的一部分,而不是我希望它们出现的位置。 如果我将路由放入中,则路由器不工作,但不会在控制台上抛出任何错误。 如何在div中显示和切换组件? 网页链接 app.js Header.js home

  • 我有包含组件A的组件B。组件A定义了PropType以验证其属性。我希望组件B中有一个表示组件a中属性的属性,验证它们并引用它们。我似乎不明白。以下是我到目前为止所做的(为简化本次讨论而抽象): ComponentB中包含PropTypes.shape的行不会抛出任何警告,但是我仍然可以向ComponentA传递虚假的属性值,所以我觉得仍然缺少一些东西。也就是说,我可以写作 没有警告或错误,即使c