Arrays React-如何在数组中仅打开一个模式
所以我刚刚开始学习react,在我的第一个小项目中,我决定使用MarvelAPI制作一个简单的UI。例如,我有一个数组,可以显示以某个字母开头的所有惊奇漫画字符;用户输入“h”,然后显示以字母h开头的每个字符。当用户单击某个角色时,会弹出一个模式并显示有关该特定角色的信息 我的问题是,当用户单击图片打开模式时,数组中每个字符的所有模式都会打开。我不知道如何只使选择打开的模式Arrays React-如何在数组中仅打开一个模式,arrays,reactjs,react-modal,Arrays,Reactjs,React Modal,所以我刚刚开始学习react,在我的第一个小项目中,我决定使用MarvelAPI制作一个简单的UI。例如,我有一个数组,可以显示以某个字母开头的所有惊奇漫画字符;用户输入“h”,然后显示以字母h开头的每个字符。当用户单击某个角色时,会弹出一个模式并显示有关该特定角色的信息 我的问题是,当用户单击图片打开模式时,数组中每个字符的所有模式都会打开。我不知道如何只使选择打开的模式 render () { var characters = _.map(this.state.characters,
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 })
}
};
render(){
var characters=\.map(this.state.characters,(character,i)=>{
var pic=character.thumboil.path
var picExt=character.缩略图.extension
返回(
{character.name}
this.openModal()}/>
this.closeModal()}contentLabel=“marvelModal”>
{character.name}
{character.description}
this.closeModal()}>Close
);
});
返回(
输入角色的名称
{this.updateCharSearch();}
}>搜寻
输入喜剧演员的名字
{this.updateCommicSearch();}
}>搜寻
{characters}
{comics}
);
}
openModal(){
this.setState({isModalOpen:true})
}
closeModal(){
this.setState({isModalOpen:false})
}
};
不要为每个角色创建一个模式-创建一个可以呈现任何选定角色的模式
例如,存储modalOpenIndex
,它将存储当前打开字符的索引,或存储关闭模型的-1
。然后移动this.closeModal()}contentLabel=“marvelModal”>
我已将模态移到函数外部,但现在我无法访问在map函数内部生成的变量以插入模态。@GANON:你是什么意思?在map函数中不需要var。通过使用modalOpenIndex
状态变量,可以获得当前打开的字符this.state.characters[modelOpenIndex]
因为在声明它们的映射函数之外的模态中有{character.name}{character.description},所以我无法再访问它们。它们不是全球宣布的。我似乎不能像以前那样使用相同的方法检索名称和描述。例如{character.name}。在map函数之外,我不知道如何访问字符数组的各个部分……如果你像我说的那样用modelOpenIndex
(当前打开的模式的编号和索引)替换isModalOpen
,那么你可以用this.state.characters[modelOpenIndex]
替换character
。如果这对您来说没有意义,那么您应该仔细阅读数组的工作原理<如果模式已关闭,则代码>modelOpenIndex应为-1
,或者为正整数,指定模式中当前显示的字符。如果整数大于-1,则显示模式并在指定索引处渲染字符。感谢您的帮助。我终于明白了!
<Modal
isOpen={this.state.modalOpenIndex >= 0}
onClose={() => this.closeModal()} contentLabel="marvelModal">