React - 如何只打开数组中的一个模式
React - How to open only one modal in an array
所以我刚刚开始学习 React,对于我的第一个小项目,我决定使用 Marvel API 制作一个简单的 UI。例如,我有一个数组显示所有以某个字母开头的奇迹字符;用户输入 'h' 然后他们会看到以字母 h 开头的每个字符。当用户单击一个字符时,会弹出一个模式并显示有关该特定字符的信息。
我的问题是,当用户单击图片打开模式时,数组中每个字符的所有模式都会打开。我不知道如何只制作选择打开的模式。
render () {
var characters = _.map(this.state.characters, (character, i) => {
var pic = character.thumbnail.path
var picExt = character.thumbnail.extension
return (
<div className="styleResults" key={i}>
<li><h3>{character.name}</h3></li>
<div>
<img src={`${pic}/standard_fantastic.${picExt}`}
alt={`${character.name}`} onClick={() => this.openModal()}/>
<Modal isOpen={this.state.isModalOpen} onClose={() =>
this.closeModal()} contentLabel="marvelModal">
<div>
<div><h1>{character.name}</h1></div>
<div><img className="modalIm" src=
{`${pic}/standard_fantastic.${character.thumbnail.extension}`} alt=
{`${character.name}`}/></div>
<div>{character.description}</div>
</div>
<p><button onClick={() => this.closeModal()}>Close</button></p>
</Modal>
</div>
</div>
);
});
return (
<div>
<div>
<div>
<h2>Enter a Character's Name</h2>
<input ref="charS" type="text"/>
<button onClick={ (e) => { this.updateCharSearch(); }
}>Search</button>
</div>
<div className="CharAndComDiv">
<h2>Enter a Comic's Name</h2>
<input ref="comicSearch" type="text"/>
<button onClick={ (e) => { this.updateComicSearch(); }
}>Search</button>
</div>
</div>
<div>
<div>
<ul>{characters}</ul>
</div>
<div>
<ul>{comics}</ul>
</div>
</div>
</div>
);
}
openModal() {
this.setState({ isModalOpen: true })
}
closeModal() {
this.setState({ isModalOpen: false })
}
};
不要为每个角色创建模态 - 创建一个可以呈现任何选定角色的模态。
例如,store modalOpenIndex
将存储当前打开的字符的索引或 -1
用于关闭模型。然后将 <Modal
移动到渲染的最后一项(不在 map 函数中)。
<Modal
isOpen={this.state.modalOpenIndex >= 0}
onClose={() => this.closeModal()} contentLabel="marvelModal">
所以我刚刚开始学习 React,对于我的第一个小项目,我决定使用 Marvel API 制作一个简单的 UI。例如,我有一个数组显示所有以某个字母开头的奇迹字符;用户输入 'h' 然后他们会看到以字母 h 开头的每个字符。当用户单击一个字符时,会弹出一个模式并显示有关该特定字符的信息。
我的问题是,当用户单击图片打开模式时,数组中每个字符的所有模式都会打开。我不知道如何只制作选择打开的模式。
render () {
var characters = _.map(this.state.characters, (character, i) => {
var pic = character.thumbnail.path
var picExt = character.thumbnail.extension
return (
<div className="styleResults" key={i}>
<li><h3>{character.name}</h3></li>
<div>
<img src={`${pic}/standard_fantastic.${picExt}`}
alt={`${character.name}`} onClick={() => this.openModal()}/>
<Modal isOpen={this.state.isModalOpen} onClose={() =>
this.closeModal()} contentLabel="marvelModal">
<div>
<div><h1>{character.name}</h1></div>
<div><img className="modalIm" src=
{`${pic}/standard_fantastic.${character.thumbnail.extension}`} alt=
{`${character.name}`}/></div>
<div>{character.description}</div>
</div>
<p><button onClick={() => this.closeModal()}>Close</button></p>
</Modal>
</div>
</div>
);
});
return (
<div>
<div>
<div>
<h2>Enter a Character's Name</h2>
<input ref="charS" type="text"/>
<button onClick={ (e) => { this.updateCharSearch(); }
}>Search</button>
</div>
<div className="CharAndComDiv">
<h2>Enter a Comic's Name</h2>
<input ref="comicSearch" type="text"/>
<button onClick={ (e) => { this.updateComicSearch(); }
}>Search</button>
</div>
</div>
<div>
<div>
<ul>{characters}</ul>
</div>
<div>
<ul>{comics}</ul>
</div>
</div>
</div>
);
}
openModal() {
this.setState({ isModalOpen: true })
}
closeModal() {
this.setState({ isModalOpen: false })
}
};
不要为每个角色创建模态 - 创建一个可以呈现任何选定角色的模态。
例如,store modalOpenIndex
将存储当前打开的字符的索引或 -1
用于关闭模型。然后将 <Modal
移动到渲染的最后一项(不在 map 函数中)。
<Modal
isOpen={this.state.modalOpenIndex >= 0}
onClose={() => this.closeModal()} contentLabel="marvelModal">