我是 ReactJS 新手。我正在将前端写入网络应用程序。我的应用程序需要显示多个模式对话框 - 每个对话框都针对给定的组合键显示。我打算使用 JQuery-UI 作为模式对话框。
下表粗略地说明了我正在尝试做的事情:
Dialog Name | Key combination (required to popup/display modal dialog)
==============================================================================
ModalDialog1 | Ctrl-X
ModalDialog2 | Shift + K
ModalDialog2 | Alt + Shift + M
etc ....
我在页面标题中“隐藏”模式表单(使用 css 将显示设置为无) - 这是最佳实践吗？
这就是我的主页:
//index.html
<html>
<head>
...
</head>
<body>
<div id="main">
</div>
</body>
</html>
这就是我的 App.js 和其他 React 组件的样子:
var React = require('react');
import ReactDOM from 'react-dom';
var PageHeader = require('./PageHeader');
var TopPanelLeftWindow = require('./TopPanelLeftWindow');
var TopPanelRightWindow = require('./TopPanelRightWindow');
var BottomPanel = require('./BottomPanel');
var App = React.createClass({
render(){
return (
<div>
<div id="header">
<PageHeader />
</div>
<div>
<div>
<div><TopPanelLeftWindow/ ></div>
<div><TopPanelRightWindow/ ></div>
</div>
</div>
<div>
<div><BottomPanel/ ></div>
</div>
</div>
);
}
});
ReactDOM.render(<App/>, window.document.getElementById("main"));
//PageHeader.js
var React = require('react');
var ModalDialogue1 = require('./ModalDialogue1');
var ModalDialogue2 = require('./ModalDialogue2');
var PageHeader = React.createClass({
render(){
return (
<div>
<div className="hiddenModalDialogs">
<div className="invisible"><ModalDialogue1 /></div>
<div className="invisible"><ModalDialogue2 /></div>
<!-- etc .. ->
</div>
</div>
);
}
});
module.exports = PageHeader;
我有两个问题:
- 我“隐藏”模式对话的方式是 ReactJs Web 应用程序的最佳实践吗？
- 如何将击键绑定(bind)到模式对话框，以便在按下击键组合时显示它们？
最佳答案
我会使用不同的方法来隐藏 React.js 应用程序中的元素。我认为 React 的状态就是解决这个问题的方法。在 App 组件中，我将添加状态属性来决定是否应显示模式。然后我会将这些属性作为 props 发送到 PageHeader 组件。最后，您可以在 Modal 本身中实现一个 prop 来决定是否应该显示它(可能更改 css className)并向其发送从 App 组件的状态获得的值。
我制作了一个片段，显示了一个没有模式的示例，其中我只是通过返回或不从父级返回元素来隐藏或显示元素。
class Header extends React.Component {
constructor(props) {
super(props);
}
render() {
let modal1;
if(this.props.showHeaderModal1){
modal1=<h1>THIS SHOULD BE A MODAL</h1>;
}
return (
<div>
{modal1}
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showHeaderModal1: false,
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
showHeaderModal1: !this.state.showHeaderModal1,
});
}
render() {
return(
<div>
<Header showHeaderModal1={this.state.showHeaderModal1} />
<button onClick={this.toggle}>TOGGLE</button>
</div>
); <div>{view}</div>;
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);<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>
<div id="container"></div>最后，我找到了this package检测酮搏。我还没有尝试过，但我想您基本上必须使用它而不是应用程序组件中的按钮。
关于javascript - ReactJS 在指定的按键上显示模式弹出表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41982273/