响应-处理和验证动态输入数。
响应-处理和验证动态输入数。
提问于 2021-05-05 15:40:29
背景：我是相对较新的反应，我正试图创建一个反应闪存卡网站，以添加到我的投资组合。我想要创建一个应用程序，将创建“闪存卡”中的每一个字母在选定的日语字母。平假名包含大约107个字母/组合字母，Katakana包含大约相同的字母。字母共享许多相同的字母，但它们的视觉书写不同。即Hir: a=あ；Kat: a=ア。这意味着，在试图验证任何给定输入的数据时，每个字母表都必须是唯一可识别的。
问题：如何动态创建所有闪存卡，而无需手动为每个闪存卡创建状态。
Json数据： jCharacters.json
卡创建代码：
<div className="row">
{Object.keys(this.state.jCharacters.hiragana.hir).map( (key, index) => (
<div className="card text-center" key= {index}>
<div>
<h5 className="card-title" >{this.state.jCharacters.hiragana.hir[key].character}</h5>
<input type="text" name={this.state.jCharacters.hiragana.hir[key].characterName} value={this.state.input[index]} onChange={this.handleChange.bind(this)} />
</div>
</div>
))}
</div>handleChange:当前代码为每个输入添加一个带有characterName的新状态。这是有缺陷的
Change(event) {
const { name, value } = event.target;
this.setState({
[name]: value
});
};任何投入都是非常感谢的，以克服这一障碍。
回答 1
Stack Overflow用户
发布于 2021-05-05 16:31:20
创建一个额外的组件(例如：(“闪光灯卡”)，它有自己的状态。然后在映射中呈现以下组件：
const Flashcard = React.FC = ({character, name}) => {
const [answer, updateAnswer] = React.useState("")
React.useEffect(()=>{
...handleChange...
},[answer])
return <div>
<h5 className="card-title" >{character}</h5>
<input type="text" name={name} value={answer} onChange={(e) => updateAnswer(e.target.value)} />
</div>
}
...
//in the main component:
<div className="row">
{this.state.jCharacters.hiragana.hir.map((item, index) => (
<div className="card text-center" key={index}>
<Flashcard character={item.character} name={item.characterName} />
</div>
))}
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67404487
复制相关文章
相似问题
腾讯云开发者
