0
這裏是我的模態分量:使用React.js顯示/隱藏模式不工作
'use strict';
import React from 'react';
const Modal = React.createClass({
handleOverlayClick() {
this.setState({ showModal: false });
},
shouldComponentUpdate (newProps, newState) {
return newState.showModal !== this.props.showModal;
},
render() {
const style = {
display: (this.props.showModal) ? 'block' : 'none'
};
console.log(style);
return (
<div className="modal-overlay" style={style}>
<div className="modal-container" onClick={this.handleOverlayClick}>
<div className="modal-content modal-input">Hello, world</div>
</div>
</div>
);
}
});
module.exports = Modal;
這是怎麼了稱之爲:
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import SplitButton from './split-button';
import EmmaButton from './emma-button';
import SelectEmailModal from './modals/email-select.modal';
const AddActionBtn = React.createClass({
onClick() {
return "#";
},
handleSendMailing() {
return ReactDOM.render(<SelectEmailModal showModal={true} />, document.getElementById('modals'));
},
handleWait() {
console.log("WAIT");
return "#";
},
render() {
return (
<SplitButton primaryLabel="ADD ACTION ▼" primaryAction={this.onClick}>
<ul>
<li><span onClick={this.handleSendMailing}>Send mailing</span></li>
<li><span onClick={this.handleWait}>Wait</span></li>
</ul>
</SplitButton>
);
}
});
module.exports = AddActionBtn;
我是一個福利局反應如此在這裏請原諒我的無知。只是想簡單地顯示/隱藏模式
啊,我需要回去做一些調查研究的兩個 – dennismonsewicz
'<應用文本=「Hello World」的>':文本是組件應用程序內的道具,所以你可以調用'this.props.text'。但是當你'this.state = {text:'Hello World!'}'你把它稱爲'this.state.text' – KadoBOT
謝謝sooo much !!! – dennismonsewicz