如何避免react.js中按下按钮时出现所有弹出窗口

Question

我正在使用redux开发一个react应用程序。现在我有一个表格，每个表格行都有一个打开弹出窗口的编辑按钮。我在redux存储中设置了一个布尔标志，可以从openeditpopup:true和openeditpopup:false切换。现在我面临的问题是，在按下1个表行的edit按钮时，所有行的弹出窗口都打开了，我不知道如何纠正这个问题。

这是我的代码：

<Grid.Row>
<Grid.Column width={1} />
<Grid.Column width={14}>

{ 
this.props.openeditpopup ? <EditPopUp position='bottom-right'/> : 
<div></div>}
</Grid.Column>

<Grid.Column width={1} />
</Grid.Row>

在上面的代码中，我正在检查openeditpopup标志是否为真和假，并在为真时显示弹出窗口。

EditPopup

class PopUp extends React.Component {
constructor(props) {
super(props);
this.triggerState = this.triggerState.bind(this);
}
triggerState() {
if (this.props.open) {
this.props.closeEditPopup();
} else {
this.props.openEditPopup();
}
}
render() {
const trigger = (<Typography size='small' className='inline' onClick={this.triggerState} customLink>{this.props.triggertext}</Typography>);
return (
<CommonPopup
trigger={trigger}
open={this.props.open}
style={{ width: this.props.width, zIndex: '500' }}
flowing
position={this.props.position}
onClickClose={false}
popupActions={<PopupActions triggerState={this.triggerState} />}
>
<Grid.Row style={{maxHeight: '300px', minHeight: '300px', overflow: 'scroll' }}>
<Grid.Column>
<FormLayout />
</Grid.Column>
</Grid.Row>
</CommonPopup>
);
}
}

CommonPopup

render() {
const {
trigger,id, label, children, position, on, offset, style, popupActions, hideOnScroll, HeaderRenderer, FooterRenderer, ...other
} = this.props;
position.replace(/left/g, 'oldLeft').replace(/right/g, 'left').replace(/oldLeft/g, 'right');

console.log(id)
return (
<Popup
key={id}  
trigger={trigger}
on={on}
style={style}
// offset={offset}
position={position}
open={this.state.open}
onClose={this.onClose}
onOpen={this.onOpen}
onMount={this.onMount}
onUnmount={this.onUnmount}
hideOnScroll={hideOnScroll}
content={(
<Grid>
{<HeaderRenderer {...this.props} popupClose={this.onClose} />}
{children}
<Divider fitted />
{<FooterRenderer {...this.props} popupClose={this.onClose} />}
</Grid>
)}
{...other}
/>
);
}
}

Answer 1

您只需声明EditPopUp组件一次(这意味着您必须仅为所有行声明EditPopUp一次(，就可以处理这样的情况；如果需要自定义任何内容，请将必要的道具传递给该组件。

<>
<Grid.Row>
<Grid.Column width={1} />
<Grid.Column width={1} />
</Grid.Row>
<Grid.Row>
<Grid.Column width={1} />
<Grid.Column width={1} />
</Grid.Row>
<Grid.Row>
<Grid.Column width={1} />
<Grid.Column width={1} />
</Grid.Row>
// Popup with props
{this.props.openeditpopup ? (
<EditPopUp position="bottom-right" rowID={this.props.rowID} />
) : (
<div></div>
)}
</>

Answer 2

<Grid.Row>
<Grid.Column width={1} />
<Grid.Column width={14}>

{ this.props.openeditpopup && <EditPopUp position='bottom-right' rowID={this.props.rowID} /> }
</Grid.Column>

<Grid.Column width={1} />
</Grid.Row>