问题标签 [react-bootstrap]

We encountered a strange behavior when using react-bootstrap's ModalTrigger with an array of items, in that it doesn't go away when the parent/owner item is unmounted. We suspect this has to do with React's virtual DOM and the diffing mechanism, and/or our own misuse of the ModalTrigger.

The setup is simple: a Content react component has a state that holds an array of item names. It also has an onClick(name) function that removes that name from the array via setState. In the render, it uses _.map to create a bunch of Item react components.

Each Item component displays its name and a ModalTrigger that holds a button labeled "delete me". Click on the button and it opens the modal; click "OK" in the modal and it executes the callback to the Content remove function.

When deleting the last item it works fine: the final Item component is unmounted, and with it, the ModalTrigger and its corresponding modal.

The problematic behavior we see is when deleting any item other than the last one. The item is removed but the modal stays open, whereas I would naively expect the modal to disappear since the parent ModalTrigger is gone. Not only that, but when clicking "ok" again, the next item on the list is removed, and so on until the modal happens to be associated with the last item, at which point clicking "ok" will finally hide it.

Our collective hunch is that this is caused by the overlayMixin's _overlayTarget being an anonymous element in the document, so that different ModalTriggers don't differentiate between them. Therefore, when a parent unmounts and React looks for the DOM diff, it sees the previous trigger's and says "hey, that could work".

This whole issue can easily be addressed by adding a hide() call in the Item's inner _onClick() function as is commented out in the code, and we finally arrive at my question:

Am I using ModalTrigger correctly, in that expecting it to go away when the parent is unmounting? This is kind of how I expect React to work in general, which means a bug in react-bootstrap.

Or should I be explicitly calling hide() because that's they way this component was designed?

Following is a piece of code that reproduces this.

Thanks!

所以我试图select在 reactjs 中获取元素的值，但就是想不通。this.refs.selectElement.getDOMNode().value总是来的undefined。表单上的所有其他控件text都可以正常工作。有任何想法吗？是不是不能通过事件获取select元素的值refs而必须使用onChange事件？

更新：

更新：解决方案 因此，如果有人遇到类似的情况，显然如果您使用 react-bootstrap，Input如果您将其包装在ListGroup. 要么将其取出，要么将所有Input元素包装在<form>标签中。这解决了我的问题，感谢所有帮助。

I have an array of items I would like to create Panels out of which would eventually be inserted into the Accordion.

In one file, I have:

In another file called Content I have:

When I have the Accordion and Panel in the same file, they work. But when I generate the Panel using map after splitting them into two files, it doesn't seem to collapse.

ReactBootstrap 提供了一个弹出框控件。我希望在单击弹出框外部时以与模式的工作方式类似的方式将其关闭（默认情况下单击开箱即用它会关闭）。

有没有办法使用 ReactBootstrap 来做到这一点，或者我需要自定义代码吗？

弹出窗口的 JSfiddle：http: //jsfiddle.net/226cwe4e/

嗨，有一个带有按钮的引导弹出窗口。我想在单击按钮以及失去焦点时关闭弹出框我该怎么办？这是小提琴

我试过 focus 它会在 popover 内单击时关闭 popover 。

问题是当我不使用 preventDefault() 时，页面会在提交时重新加载并隐藏。当使用 preventDefault 时，我的表单正在执行它在 onSubmit 中的操作，但在提交后它并没有隐藏。当我使用其他只有

形式隐藏得很好。

如何在使用 onSubmit 完成后隐藏该表单。

代码只是来自 http://react-bootstrap.github.io/components.html#modals的 ModalTrigger 示例 和 React 基础教程
http://facebook.github.io/react/docs/tutorial.html的混合。

我想绑定以在escape按下时关闭活动的反应引导弹出窗口。这是代码

但是当我按任意键时，控制台中没有任何记录。我也尝试在窗口和不同的情况下听。'keypress'，'keyup'等，但似乎我做错了什么。

我刚刚开始使用 React（和 React-bootstrap 组件）。我有一个手风琴组件正在工作，但希望可以选择禁用手风琴控件中的一个或多个子面板。禁用时，我希望折叠的面板标题以禁用状态呈现，并防止扩展。这可能吗？

我已经尝试了几个小时尝试我发现的不同示例，但似乎没有一个有效。

我想要做什么（没有自定义 JS）：http: //jsfiddle.net/paulalexandru/Z2Lu5/

但是，我无法让它在 Bootstrap 中工作。我专门使用 React-Bootstrap（对于那些不熟悉 React/React-Bootstrap 的人，我已将以下代码更改为普通 HTML），但我认为这不是问题所在。我的设置如下：

然而，无论我多么努力

您还会注意到尝试使搜索结果手风琴的东西，但这对我来说毫无用处，直到我可以让这个框留在底部。

我的猜测是 Bootstrap 的行/列导致了一些问题。我无法将搜索框移出网格并移到底部（确实有效），因为它还覆盖了侧边栏，并且我正在使用网格系统来保持搜索框动态调整大小/放置。

另外，我试过这个，但似乎没有用：在 Bootstrap 3 中制作可扩展的固定页脚？

我正在处理一个反应项目并尝试使用 react-bootstrap 显示一个对话框。我刚刚在 js 文件中复制了一个有效的 react-bootstrap 片段，但它对我不起作用，我在Uncaught SyntaxError: Unexpected token <旁边<div className='static-modal'>。

这是js文件的内容：

当我在返回行中使用 " 时，如下所示：

我收到此错误：

知道这里有什么错误吗？