Question

我看到了这个文件 https://www.npmjs.com/package/react-modal

我试图实现这个，但它没有显示任何原因？它也没有给出任何错误这是我的代码 https://plnkr.co/edit/aRPfONa55Cn7GTCItDbH?p=preview 的更新

https://plnkr.co/edit/aRPfONa55Cn7GTCItDbH?p=preview

const  Modal  = ReactModal;
class Main extends React.Component {
   constructor(props) {
    super(props);
    this.state = { modalIsOpen: false };
  }
 function closeModal() {
    this.setState({modalIsOpen: false});
  }
  function afterOpenModal() {
    this.setState({modalIsOpen: false});
  }
   function openModal() {
    this.setState({modalIsOpen: false});
  }
  render() {
    return  (
       <div>
        <button onClick={this.openModal}>Open Modal</button>
        <Modal
          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >

          <h2 ref="subtitle">Hello</h2>
          <button onClick={this.closeModal}>close</button>
          <div>I am a modal</div>
          <form>
            <input />
            <button>tab navigation</button>
            <button>stays</button>
            <button>inside</button>
            <button>the modal</button>
          </form>
        </Modal>
      </div>
    )
  }
}


ReactDOM.render(
  <Main/>,
  document.getElementById('root')
);

Answer 1

此处，问题是您永远不会将modalIsOpen状态变量设置为true。

<button onClick={this.openModal}>Open Modal</button>

当用户点击上面的按钮时，您正在调用openModal功能。在其中您需要将modalIsOpen设置为true。

function openModal() {
    this.setState({modalIsOpen: true});
}

并且，我还认为您需要更改afterOpenModal函数，因为一旦模式打开，它会立即将modalIsOpen设置为false。因此，如果不需要，您可以注释掉该代码，并且最后onRequestClose您正在调用closeModal函数，该函数将状态变量modalIsOpen设置为false，并且将从视图中隐藏模态

Answer 2

你必须绑定你的方法，否则React将找不到它们。

constructor(props) {
    super(props);
    this.state = { modalIsOpen: false };
    this.closeModal.bind(this); //etc.
  }

如果您支持ES6并使用=>键，则不需要这样做。

 function closeModal = () => {
    this.setState({modalIsOpen: false});
  }

关于handling events

的React文档

为什么模型不显示在文档中？

2 个答案: