Question

this.setState()

所以我试图将react-modal集成到我的项目中。

未调用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>方法我没有看到控制台日志，当我将回调传递给setState（）方法时也没有。

有人可以帮帮我吗？

你的时间！

更新 - 启动组件代码。

redux

）;

另外，我必须提到我也在使用.flex { display: flex; } .item { width: 50%; } .square { width: 100%; background: red; } .square:after { content: ""; display: block; padding-bottom: 100%; }。

Answer 1

问题似乎是在处理事件时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 2

您的代码似乎对我有用。我只是设置<StartComponent />，看起来状态正如你想要的那样。

尝试使用以下代码的代码段：

另外，您可以查看 CodePen Demo 。

＆＃13;

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"));

＆＃13;

.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";
}

＆＃13;

<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>

＆＃13;

Answer 3

将回调传递给setState意味着当setState完成时，它将继续运行该函数; setState是异步的，但这不会对你有所帮助。为StartComponent组件提供代码可能会有所帮助，因为可能没有调用您的处理函数。

尝试onClick={() => props.handleModalOpen()}

注意：只是一个建议，考虑在子节点中为你的道具命名与父节点相同，因为handleModalOpen和handleOpenModal会让人感到困惑。

Answer 4

你必须绑定功能才能使用＆＃39;这个＆＃39;关键字

mvn dependency:tree

React-modal setstate不起作用

4 个答案: