React Antd 在 array.map 上显示多个模态

IT技术 reactjs antd
2021-04-27 23:48:31

单击更新按钮时，模式会弹出两次，第一个显示正确的 item.id，但第二个是列表中的最后一个值。任何帮助表示赞赏。尝试在模态标签内添加 {this.props.child} 但它不起作用。

任何帮助，将不胜感激。

 this.state = {
  ModalText: 'Content of the modal',
  visible: false,
  currentId : 0,
  confirmLoading: false,
 }
}

showModal = () => {
 this.setState({
  visible: true,
 });
}



handleOk = () => {
    this.setState({
      ModalText: 'The modal will be closed after two seconds',
      confirmLoading: true,
    });
    setTimeout(() => {
      this.setState({
        visible: false,
        confirmLoading: false,
      });
    }, 2000);
  }

  handleCancel = () => {
    console.log('Clicked cancel button');
    this.setState({
      visible: false,
    });
  }

  render(){
    const { visible, confirmLoading, ModalText } = this.state;
    return(
      <div>
        <ul>
          {this.props.user.map(item => (
            <li key={item.id}>
              The person is {item.name} and the his/her email is 
 {item.email}.

            <Button type="primary" onClick={this.showModal}>
              Update
            </Button>
            <Modal title="Title"
              visible={visible}
              onOk={this.handleOk}
              confirmLoading={confirmLoading}
              onCancel={this.handleCancel}

            >
              {item.id}
              <UpdateModal/>

            </Modal>

            </li>
          ))}
        </ul>
        </div>
    )
  }
 }
2个回答

我认为如果您通过开发人员工具查看 DOM，您会发现模式不会弹出两次，而是每个项目弹出一次，并且显示最后一个项目的只是顶部的那个。您的所有模态（您为每个项目渲染一个）都由visible您所在州的同一个布尔值控制，因此true通过单击列表中的任何按钮将其设置为将显示所有模态。

有几种不同的方法可以解决这个问题。一种选择是在lis之外有一个单一的模态，并在单击特定按钮时将项目 ID 设置为状态，并在模态中使用该状态。

模态出现多次的原因是因为

  1. 即使您不单击，按钮的 this.showModal 也会在组件呈现时自动调用，因此您需要对其进行限制

  2. 您总是在循环中没有任何条件检查的情况下显示模态，因此您需要对模态进行条件检查

所以改变

     <Button type="primary" onClick={this.showModal}>
          Update
        </Button>
        <Modal title="Title"
          visible={visible}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}

        >
          {item.id}
          <UpdateModal/>

        </Modal>

到

     <Button type="primary" onClick={() => this.showModal()}> //made changes here
          Update
        </Button>
      //added change here —>  {visible && <Modal title="Title"
          visible={visible}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}

        >
          {item.id}
          <UpdateModal/>}

        </Modal>
其它你可能感兴趣的问题
上一篇动态背景图像react 下一篇react-router如何单击以详细了解组件