比较来自世界各地的卖家的域名和 IT 服务价格

如何动态地更改内容引导模式响应?

我试图在安装后更改modala的内容,但我找不到正确的节点来更改。 我附上了与我感兴趣的节点的链接,并试图改变它们 componentDidMount//. 但找不到节点 - 事实证明 null.


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 = "<strong> Something here</strong>";
},

render// {
return /
<div>
<modal onhide="{this.close}" show="{this.state.showModal}">
<modal.header closebutton="">
<modal.title></modal.title>
</modal.header>
<modal.body>
<div><img ref="bigPic" src=""/></div>
</modal.body>
<modal.footer>
<p ref="bigPicInfo"></p>
</modal.footer>
</modal>
</div>
/;
}
}/;

ReactDOM.render/<mymodal></mymodal>, document.getElementById/"my-modal"//;
已邀请:

裸奔

赞同来自:

动态内容B. React 按照您使用的同时由组件的状态控制
this.state.showModal

用于模态元素的动态显示。 可能更改的所有内容都必须是默认值
getInitialState

, 然后打电话
this.setState//

使用您的新价值。这将调用您组件的重新可视化。


const MyModal = React.createClass/{

getInitialState// {
return {
showModal: false,
bigPicSrc: '',
infoContent: ''
}
},

...

componentDidMount// {
this.setState/{
bigPicSrc: 'http://big-pic.png'
infoContent: <strong>Something here</strong> // not a string, but a component
}/
},

render// {
return /
<modal onhide="{this.close}" show="{this.state.showModal}">
<modal.header closebutton="">
<modal.title></modal.title>
</modal.header>
<modal.body>
<div><img ref="bigPic" src="{this.state.bigPicSrc}"/></div>
</modal.body>
<modal.footer>
<p ref="bigPicInfo">{this.state.infoContent}</p>
</modal.footer>
</modal>
/
}
}/

江南孤鹜

赞同来自:

我用 node 和 react 16, 在我发现一点之前 Bootstrap, 现在我收集了我的了解 bout react 和 bootstrap. 在下一步中,我做模特:首先我放了 CDN 链接S. Bootstrap css 和 js, 和 jquery 从 index.html 来自共享文件夹。 然后创建一个文件夹

成分

来自文件夹

SRC

应用程序 ny. 下一步我将引导代码从新文件示例中放置 modal.js 并更改引导类 clssName 对其做出反应。 和莫代尔一起担任此文本的点击才能显示调制
.

并认为要更改调制范围内容,必须使用某些文件数据的数据 Json 在那里,您必须连接字段 id 数据 Json 事件 ref 或者 id tigger 挑战这个modala。 总是不同的现场标识符字段事件来自 data.json. 我认为最好使用开关外壳以便于选择。

要回复问题请先登录注册