React-модальная установка не работает

Question

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

    }

    handleOpenModal = () => {
        console.log("Here")
        //this.setState({ showModal: true }, () =>{ console.log(this.state) });
        this.setState(() => {
            console.log("Changing state")
            return { showModal: true }
          });
    }

    handleCloseModal = () => {
        console.log(this.state.showModal)
        this.setState( );
    }


    render() {
        console.log(this.state)
        return (
            <div>
                <StartComponent handleModalOpen={this.handleOpenModal} />
                <ReactModal
                    isOpen={this.state.showModal}
                    contentLabel="Minimal Modal Example"
                >asda
                    <button onClick={this.handleCloseModal}>Close Modal</button>
                </ReactModal>
            </div>
        )
    }
}

Поэтому я пытаюсь интегрировать реактивный модал в свой проект.

this.setState() метод не вызывается, я не вижу консольного журнала, ни когда я передаю обратный вызов в setState() methpd.

Может кто-нибудь помочь мне, пожалуйста?

Спасибо за ваше время!

ОБНОВЛЕНИЕ - Запустите код компонента.

export const StartComponent = (props) => (
<div className="start-page">
    <div className="container">
        <div className="row">
            <div className="col-sm-6">
                <NavLink to="/start/klarungsfalle">Einträge prüfen</NavLink>
            </div>
            <div className="col-sm-6" >
                <NavLink onClick={props.handleModalOpen} style={{ background: "#aac4d3", cursor: "default" }} to="/">Einträge verfügen</NavLink>
            </div>
        </div>
    </div>
</div>

);

Плюс я должен отметить, что я также использую redux,

Answer 1

Ваш код, кажется, работает для меня. Я просто настроил <StartComponent /> и похоже, что состояние устанавливается так, как вы хотите.

Попробуйте следующий фрагмент кода, который использует ваш код:

В качестве альтернативы вы можете проверить эту демонстрацию CodePen.

const { HashRouter, NavLink } = ReactRouterDOM;

const App = () => (
  <HashRouter>
    <Modal />
  </HashRouter>
);

const StartComponent = ({currentState, handleModalOpen, handleNix}) => (
  <div className="start-page">
    <div className="container">
      <div className="row">
        <div className="col-sm-6">
          <NavLink to="/start/klarungsfalle" onClick={handleNix}>Einträge prüfen</NavLink>
        </div>
        <div className="col-sm-6">
          <NavLink
            onClick={handleModalOpen}
            style={{ background: "#aac4d3", cursor: "default" }}
            to="/"
            >
            Einträge verfügen
          </NavLink>
        </div>
      </div>
      <div className='row justify-center'>
        <div className='col-xs-12'>
          <div>
            <code>Modal</code> state
            <pre>{JSON.stringify(currentState)}</pre>
          </div>
        </div>
      </div>
    </div>
  </div>
);


class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }

  handleOpenModal = () => {
    console.log("Here");
    this.setState(() => {
      console.log(`Changing state to 'showModal: ${this.state.showModal}'`);
      return { showModal: true };
    });
  };
  
  handleNix = () => {
    alert("hier gibt's nichts");
  }

  handleCloseModal = () => {
    console.log(this.state.showModal);
    this.setState(() => {
      console.log(`Changing state to 'showModal: ${this.state.showModal}'`);
      return { showModal: false };
    });
  };

  render() {
    console.log(this.state);
    return (
      <div className="container">
        <StartComponent
          handleModalOpen={this.handleOpenModal}
          handleNix={this.handleNix}
          currentState={this.state}/>
        <ReactModal
          isOpen={this.state.showModal}
          contentLabel="Minimal Modal Example">
          <div className="flex columns-center">
            <div className="note">
              The modal hides the Stack Overflow console. Look behind the modal
              or open your JS console.
            </div>
            <div className="flex">
              <div>
                <code>Modal</code> state
                <pre>{JSON.stringify(this.state)}</pre>
              </div>
              <button
                className="btn btn-sm btn-danger"
                onClick={this.handleCloseModal}>
                Close Modal
              </button>
            </div>
          </div>
        </ReactModal>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.space-around {
  justify-content: space-around;
}

.columns-center {
  flex-direction: column;
  align-items: center;
}

.note {
  font-size: 0.7em;
  margin-bottom: 1rem;
}

.btn:after {
  content: "\01F436";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div id="app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/2.3.2/react-modal.min.js"></script>

Answer 2

Кажется, что проблема заключается в некоторых отсутствующих привязках, необходимых для es6 при работе с событиями. Поэтому для доступа обработчиков к состоянию просто поместите эти привязки в ваш конструктор:

constructor() {
    super();
    this.state = {
        showModal: false
    };
    // bindings
    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
}

Анонимные функции там не нужны:

 handleOpenModal() {
    this.setState({showModal: true});
}

handleCloseModal() {
    this.setState({showModal: false});
}

Answer 3

Передача обратного вызова в setState означает, что когда setState завершит работу, он запустит эту функцию следующим; setState является асинхронным, но здесь вам это не поможет. Может быть полезно предоставить код для вашего компонента StartComponent, так как скорее всего ваша функция-обработчик не вызывается.

пытаться onClick={() => props.handleModalOpen()}

Примечание: просто предложение, подумайте о том, чтобы называть ваши реквизиты тем же, что и в child, как в родительской причине. HandleModalOpen и handleOpenModal могут привести к путанице.

Answer 4

Вы должны связать функции, чтобы использовать это ключевое слово

 constructor() {
    super();
    this.state = {
        showModal: false
    };
    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
}