Как открыть модальное окно в React?

Question

[Wasya UK]

У меня есть отдельная кнопка, которая должна открывать модальное окно, но само состояние открытия находится в классе модального окна. Как изменить состояние извне?

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
  }

  handleSubmit (e) {
    e.preventDefault();
  }

  showTradeModal = () => {
    this.setState({ isOpen: true });
  }

  closeTradeModal = () => {
    this.setState({ isOpen: false });
  }

  render() {
    return (
      <Modal isOpen={this.state.isOpen} style={tradeOptions}>
        <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
        <div>I am a modal</div>
        <form onSubmit={this.handleSubmit}>
          <input />
          <button>tab navigation</button>
          <button>stays</button>
          <button>inside</button>
          <button>the modal</button>
        </form>
        <button onClick={this.props.buyCurrency}>Confirm</button>
        <button onClick={this.closeTradeModal}>Cancel</button>
      </Modal>
    );
  }
}

Answer 1

[nakree]

class Container extends React.Component {
  state = {
   showModal: false
  }

  handleModal = () => {
    this.setState({showModal: !this.state.showModal});
  }
render() {
  return (
    <Fragment>
      { this.state.showModal && <MyModal handleModal={this.handleModal}/> }
      <button onClick={this.handleModal}> Show modal </button>
    </Fragment>
   )
}

Можно открывать из вне, и закрывать модалку в самой модалке.
Аналогично можно добавить еще поля в стейте и пару хендлеров, чтобы получить сколько угодно модалок в одном компоненте.

Answer 2

[Роман Александрович]

вот так попробуйте

import Modal from "./Modal"

showModal(){
this.modal. showTradeModal()
}
render(){
<View>
<Button onClick={()=>this.showModal}
<Modal  ref={modal=>this.modal=modal}/>
</View>
}

Answer 3

[real2210]

https://reactjs.org/docs/portals.html

Ознакомьтесь с оф. документацией