Javascript 将数据从可单击的表行动态显示到模式
我试图创建一个由数据行组成的组件,单击该组件时,会打开一个包含与该表行相关信息的模式。例如,当用户单击“团队1”时,会出现一个模式,显示一个新表,显示分配给该团队的每个用户 我已经设法使用手动提供的参数实现了这一点,但是我不知道如何根据单击的表行使模式动态显示数据Javascript 将数据从可单击的表行动态显示到模式,javascript,html,twitter-bootstrap,reactjs,jsx,Javascript,Html,Twitter Bootstrap,Reactjs,Jsx,我试图创建一个由数据行组成的组件,单击该组件时,会打开一个包含与该表行相关信息的模式。例如,当用户单击“团队1”时,会出现一个模式,显示一个新表,显示分配给该团队的每个用户 我已经设法使用手动提供的参数实现了这一点,但是我不知道如何根据单击的表行使模式动态显示数据 getInitialState:函数(){ 返回{ 小组:[ { id:'1', 团队名称:“团队1”, 用户:['dave','steve','jim','barry','tom','harry'] }, ] }; 渲染:函数(){
getInitialState:函数(){
返回{
小组:[
{
id:'1',
团队名称:“团队1”,
用户:['dave','steve','jim','barry','tom','harry']
},
]
};
渲染:函数(){
var self=这个;
var projectsTable=this.state.teams.map(函数(obj,索引){
返回(
{obj.teamName}
{obj.users.length}个用户
);
});
var projectUsersModal=this.state.teams.map(函数(obj,索引){
返回(
);
});
返回(
项目
{projectsTable}
{projectUsersModal}
);
}
我认为,render()
方法正在为团队数组中的每个团队创建一个隐藏模式,而不管用户是否请求显示该模式(单击团队链接)或者不是。更好的方法是按需创建特定的模式,即当用户单击团队的链接时
这可以通过创建一个单击处理程序来实现,在该函数中,您可以通过设置模式所涉及的团队id来修改状态,如下所示:
onClickTeam: function(teamId) {
this.setState({
openModalTeamId: this.state.openModalTeamId == teamId ? null : teamId
});
}
然后在render()中
方法您需要检查此OpenModalTemid
状态属性是否有某些值,如果有,并且由于您正在其中存储团队id,您需要使用在状态团队数组中查找此特定团队,然后使用返回的结果来构造模式的内容
render: function() {
...
var modalBody;
if (this.state.openModalTeamId) {
var team = this.state.teams.find(function(el) {
return el.id == self.state.openModalTeamId
});
modalBody =
...
<div className="modal-body">
Lets assume this is your modal containing the
following info about the selected team:
<br /><br />
{JSON.stringify(team)}
<br /><br />
<div onClick={(this.onClickTeam.bind(this, team.id))}>
Click me to close
</div>
</div>
...
}
...
}
无论用户是否请求显示模式(单击团队链接),我认为render()方法正在为团队数组中的每个团队创建一个隐藏模式或者不是。更好的方法是按需创建特定的模式,即当用户单击团队的链接时
这可以通过创建一个单击处理程序来实现,在该函数中,您可以通过设置模式所涉及的团队id来修改状态,如下所示:
onClickTeam: function(teamId) {
this.setState({
openModalTeamId: this.state.openModalTeamId == teamId ? null : teamId
});
}
然后在render()中
方法您需要检查此OpenModalTemid
状态属性是否有某些值,如果有,并且由于您正在其中存储团队id,您需要使用在状态团队数组中查找此特定团队,然后使用返回的结果来构造模式的内容
render: function() {
...
var modalBody;
if (this.state.openModalTeamId) {
var team = this.state.teams.find(function(el) {
return el.id == self.state.openModalTeamId
});
modalBody =
...
<div className="modal-body">
Lets assume this is your modal containing the
following info about the selected team:
<br /><br />
{JSON.stringify(team)}
<br /><br />
<div onClick={(this.onClickTeam.bind(this, team.id))}>
Click me to close
</div>
</div>
...
}
...
}
您可以使用
它既允许您使用闭包中的变量(如果您将其提供给图层的“使用”属性,则会自动传播),也允许您将事件数据从切换窗口设置为模态窗口。此外,您还可以使用zIndex一个接一个地“堆叠”图层
import { Layer, LayerContext } from 'react-layer-stack'
// ... for each `object` in array of `objects`
const modalId = 'DeleteObjectConfirmation' + objects[rowIndex].id
return (
<Cell {...props}>
// the layer definition. The content will show up in the LayerStackMountPoint when `show(modalId)` be fired in LayerContext
<Layer use={[objects[rowIndex], rowIndex]} id={modalId}> {({
hideMe, // alias for `hide(modalId)`
index } // useful to know to set zIndex, for example
, e) => // access to the arguments (click event data in this example)
<Modal onClick={ hideMe } zIndex={(index + 1) * 1000}>
<ConfirmationDialog
title={ 'Delete' }
message={ "You're about to delete to " + '"' + objects[rowIndex].name + '"' }
confirmButton={ <Button type="primary">DELETE</Button> }
onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hideMe) } // hide after confirmation
close={ hideMe } />
</Modal> }
</Layer>
// this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree
<LayerContext id={ modalId }> {({showMe}) => // showMe is alias for `show(modalId)`
<div style={styles.iconOverlay} onClick={ (e) => showMe(e) }> // additional arguments can be passed (like event)
<Icon type="trash" />
</div> }
</LayerContext>
</Cell>)
// ...
从'react Layer stack'导入{Layer,LayerContext}
//…对于“对象”数组中的每个“对象”`
const modalId='DeleteObjectConfirmation'+对象[rowIndex].id
返回(
//层定义。当在LayerContext中激发'show(modalId)`时,内容将显示在LayerStackMountPoint中
{({
hideMe,//隐藏的别名(modalId)`
index}//知道如何设置zIndex很有用,例如
,e)=>//访问参数(在本例中单击事件数据)
}
//这是“id==modalId”的层的切换,可以在组件树的任何地方定义
{({showMe})=>//showMe是'show(modalId)的别名`
showMe(e)}>//可以传递其他参数(如事件)
}
)
// ...
您可以使用
它既允许您使用闭包中的变量(若您将其提供给图层的“使用”属性,它将自动传播),也允许您将事件数据从切换窗口设置为模式窗口。此外,还可以使用zIndex一个接一个地“堆叠”层
import { Layer, LayerContext } from 'react-layer-stack'
// ... for each `object` in array of `objects`
const modalId = 'DeleteObjectConfirmation' + objects[rowIndex].id
return (
<Cell {...props}>
// the layer definition. The content will show up in the LayerStackMountPoint when `show(modalId)` be fired in LayerContext
<Layer use={[objects[rowIndex], rowIndex]} id={modalId}> {({
hideMe, // alias for `hide(modalId)`
index } // useful to know to set zIndex, for example
, e) => // access to the arguments (click event data in this example)
<Modal onClick={ hideMe } zIndex={(index + 1) * 1000}>
<ConfirmationDialog
title={ 'Delete' }
message={ "You're about to delete to " + '"' + objects[rowIndex].name + '"' }
confirmButton={ <Button type="primary">DELETE</Button> }
onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hideMe) } // hide after confirmation
close={ hideMe } />
</Modal> }
</Layer>
// this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree
<LayerContext id={ modalId }> {({showMe}) => // showMe is alias for `show(modalId)`
<div style={styles.iconOverlay} onClick={ (e) => showMe(e) }> // additional arguments can be passed (like event)
<Icon type="trash" />
</div> }
</LayerContext>
</Cell>)
// ...
从'react Layer stack'导入{Layer,LayerContext}
// ... 对于“对象”数组中的每个“对象”`
const modalId='DeleteObjectConfirmation'+对象[rowIndex].id
返回(
//层定义。当在LayerContext中激发'show(modalId)`时,内容将显示在LayerStackMountPoint中
{({
hideMe,//隐藏的别名(modalId)`
index}//知道如何设置zIndex很有用,例如
,e)=>//访问参数(在本例中单击事件数据)
}
//这是“id==modalId”的层的切换,可以在组件树的任何地方定义
{({showMe})=>//showMe是'show(modalId)的别名`
showMe(e)}>//可以传递其他参数(如事件)
}
)
// ...
小提琴找不到桌子了。你能更新一下吗?里面也有很多错误,所以它甚至不能运行。它显示在我的小提琴上,我不明白为什么会发生这种情况?小提琴没有放在桌子上。你能不能更新一下,里面也有很多错误,所以它甚至不能运行。它在我的小提琴上显示出来,我不明白为什么会发生这种情况?