Открыть модал только по одной указанной кнопке c - PullRequest
Новая
       3

Открыть модал только по одной указанной кнопке c

0 голосов
/ 05 февраля 2020

У меня в React три кнопки JS, и я хочу, чтобы две из них открывали внешние ссылки, а одна - модальную. У меня возникли некоторые проблемы с выяснением логики c для этого и с работающими модал и ссылками. Я думаю, что это то, как я звоню в реквизит, но я застрял на том, как это исправить. У меня есть многократно используемый компонент кнопки:

ButtonComponent.jsx

class ButtonComponent extends React.Component {
   handleClick(props) {
    if (props.text.includes('Modal Button')) {
      return (
        props.openModal
      );
    }
    props.history.push(props.link);
  }

render() {
    return (
            <div>
               <button onClick={() => this.handleClick(this.props)}>{this.props.text}</button>           
            </div>
    );
  }
}
}

Это компонент, где я буду использовать кнопки ButtonRow.jsx

class ButtonRow extends React.Component {
  openModal() {
    return (
        <ReusableModal
            header={'Title'}
            body={'Content'}
            button={'Open link'}
        />
    );
  }

  render() {
    return (
        <div>
            <Container>
                    <ButtonComponent text={'Modal Button'} openModal={this.openModal()} />
                    <ButtonComponent text={'Link Button'} link={'google.com'} />
                    <ButtonComponent text={'Link Button'} link={'google.com'} />
            </Container>
        </div>
    );
  }
}

Я также используя повторно используемый модальный компонент, в котором уже записано состояние isOpen и isClosed. 

class ReusableModal extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleOpen() {
    this.setState({ isOpen: true });
  }

  handleClose() {
    this.setState({ isOpen: false });
  }

  render() {
    return (
        <>
            <Button onClick={this.handleOpen}>
                {this.props.button}
            </Button>
            <Modal
                show={this.state.isOpen}
                onHide={this.handleClose}
            >
                <Modal.Header>
                    <Modal.Title>{this.props.header}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <div>
                       {this.props.body}
                    </div>
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={this.handleClose}>
                        Close
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
  }
}

1 Ответ

0 голосов
/ 05 февраля 2020 
1) App.js

 App extends React.Component {
  render() {
    return (
      <div>
        <Container>
          <ButtonComponent text={"Modal Button"} />
          <ButtonComponent text={"Link Button"} link={"google.com"} />
          <ButtonComponent text={"Link Button"} link={"google.com"} />
        </Container>
      </div>
    );
  }
}

2) ButtonComponent 

  class ButtonComponent extends React.Component {
  state = {
    show: false
  };

  handleClick(props) {
    if (props.text.includes("Modal Button")) {
      // props.openModal();
      this.setState({ show: true });
    } else {
      props.history.push(props.link);
    }
  }

  render() {
    return (
      <div>
        {this.state.show && (
          <ReusableModal
            open={true}
            showBtn={false}
            close={() => {
              this.setState({ show: false });
            }}
            header={"Title"}
            body={"Content"}
            button={"Open link"}
          />
        )}
        <button onClick={() => this.handleClick(this.props)}>
          {this.props.text}
        </button>
      </div>
    );
  }
}

2) Многоразовый модальный 

  class ReusableModal extends React.Component {
  render() {
    return (
      <>
        {this.props.showBtn && (
      <Button onClick={this.handleOpen}>{this.props.button}</Button>
    )}
        <Modal show={this.props.open} onHide={this.props.close}>
          <Modal.Header>
            <Modal.Title>{this.props.header}</Modal.Title>
          </Modal.Header>
            <Modal.Body><div>{this.props.body}</div></Modal.Body>
          <Modal.Footer>
            <Button onClick={this.props.close}>Close</Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
}
...