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>
)
}
主要问题是所有卡的状态都存储在父组件中的一个位置。这意味着任何时候任何输入改变,所有的卡片都将重新呈现。您需要彻底重新考虑如何在这里存储状态。我不打算为您编写代码,但以下是您需要做的:
值
和onchange
内容移动到FormItem组件中。每个表单项都应该负责自己的值和事件处理程序。祝你好运.
我遇到了一个奇怪的问题,我不知道是怎么回事。我以前使用完全相同的代码,但现在它的行为不同了。也许我忽略了什么。我想要的:为了我的问题:我想呈现一个有三个选项的选择输入。其中一个选项是“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