如何避免在 react.js 中按下按钮时打开所有弹出窗口？

Question

我正在使用 redux.Now 开发一个 React 应用程序我有一个 table 每个 table 行都有一个编辑按钮可以打开 popup.I 设置了一个布尔值从 openeditpopup:true 和 openeditpopup:false 切换的 redux 商店中的标志。现在我面临的问题是，按下 1 table 行的 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>

如何避免在 react.js 中按下按钮时打开所有弹出窗口？

How to avoid all popups opening up on button press in react.js?

javascript

reactjs

redux

react-redux

react-props