Porównaj ceny domen i usług IT, sprzedawców z całego świata

Jak mogę dynamicznie zmienić zawartość modalu bootstrap, aby zareagować?


Próbuję zmienić zawartość modalu po zamontowaniu go, ale nie mogę znaleźć poprawnych węzłów do zmiany. Dołączyłem linki do interesujących mnie węzłów i próbowałem je zmienić w componentDidMount (). Ale nie znaleziono żadnych węzłów - okazuje się, że jest zerowy.
<div class="snippet-code">
<div class="snippet" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">
var Modal = ReactBootstrap.Modal;
const MyModal = React.createClass({ getInitialState() {
return { showModal: false };
}, close() {
this.setState({ showModal: false });
}, open() {
this.setState({ showModal: true });
},
componentDidMount() {
var theNode = ReactDOM.findDOMNode(this.refs.bigPic);
var theOtherNode = ReactDOM.findDOMNode(this.refs.bigPicInfo);
theNode.src = 'http://big-pic.png';
theOtherNode.innerHTML = "[b] Something here[/b]";
}, render() {
return ( <div>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title></Modal.Title>
</Modal.Header>
<Modal.Body>
<div><img ref="bigPic" src=""/>
</Modal.Body>
<Modal.Footer>
<p ref="bigPicInfo"> </Modal.Footer>
</Modal>

);
}
});ReactDOM.render(<MyModal/>, document.getElementById("my-modal"));

Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Treść dynamiczna w React jest zarządzana przez stan komponentu w taki sam sposób, w jaki używasz
this.state.showModal
do dynamicznego wyświetlania modalu lub nie. Wszystko, co może się zmienić, powinno mieć domyślnie wartość
getInitialState
, a następnie wywołać
this.setState ()
z nowymi wartościami. Spowoduje to ponowne renderowanie komponentu.
<pre class="lang-js prettyprint-override">
const MyModal = React.createClass({ getInitialState() {
return {
showModal: false,
bigPicSrc: '',
infoContent: ''
}
}, ... componentDidMount() {
this.setState({
bigPicSrc: 'http://big-pic.png'
infoContent: [b]Something here[/b]// not a string, but a component
})
}, render() {
return ( <Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title></Modal.Title>
</Modal.Header>
<Modal.Body>
<div><img ref="bigPic" src={this.state.bigPicSrc}/>
</Modal.Body>
<Modal.Footer>
<p ref="bigPicInfo">{this.state.infoContent} </Modal.Footer>
</Modal>
)
}
})
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Używam węzła i reaguję 16, zanim dowiedziałem się trochę więcej o Bootstrapie, a teraz zbieram swoją wiedzę na temat Bout React i Bootstrap. W kolejnym kroku tworzę modal: najpierw umieszczam łącze CDN z Bootstrap css i js oraz jquery z index.html z publicznego folderu. Następnie utwórz folder dla

składniki

z folderu

SRC

ny aplikacje. W następnym kroku umieściłem kod ładujący z nowego przykładowego pliku modal.js i zmieniam klasę ładowania z clssName, aby reagowała. Modal działał, klikając ten tekst, aby wyświetlić modal .
I pomyśl, że aby zmienić zawartość modalu, musisz użyć niektórych danych z pliku Json, musisz połączyć pole danych Json id i zdarzenie ref lub id tigger z wywołaniem tego modalu. Zawsze inne pole identyfikatora wywołania zdarzenia z data.json. Myślę, że najlepiej jest użyć korpusu przełącznika do łatwego wybierania.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się