可折叠消失中的反应可折叠文本
问题描述:
我正在使用prop triggerSibling以避免在单击按钮时可折叠的被展开。但不知何故,这样做时,可折叠内的文字就不会出现。这里有一个例子:可折叠消失中的反应可折叠文本
<div className="row">
<Collapsible
trigger={
<div>
<div className="col-sm-3">
Text
</div>
<div className="col-sm-3">
Text
</div>
<div className="col-sm-3">
Text
</div>
</div>
}
triggerSibling={
<div className="col-sm-3">
<button className="btn btn-success" type="button">Test</button>
<button className="btn btn-danger" type="button">Test</button>
</div>
}>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
</Collapsible>
</div>
UPDATE 按照要求,这里是满级。目前它是一个模式组件内部:
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { hideModal } from '../../actions/ModalActions';
import Modal from '../../components/Modal';
import UserCreation from '../../components/UserCreation';
import Collapsible from 'react-collapsible';
const Confirmation = ({ title, onConfirm, hideModal }) => {
const handleSubmit = (values) => {
hideModal();
onConfirm(values);
}
return (
//remove onClose if the Modal should only be closed via clicking one of the buttons
<Modal title={title} onClose={() => hideModal() }>
{/* <UserCreation mySubmit={handleSubmit}/> */}
<div className="row">
<Collapsible
trigger={
<div>
<div className="col-sm-3">
Text
</div>
<div className="col-sm-3">
Text
</div>
<div className="col-sm-3">
Text
</div>
</div>
}
triggerSibling={
<div className="col-sm-3">
<button className="btn btn-success" type="button">Test</button>
<button className="btn btn-danger" type="button">Test</button>
</div>
}>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
</Collapsible>
</div>
</Modal>
);
}
export default connect(null, { hideModal })(Confirmation);
答
这是你的主要问题。这是因为你不应该构成一些JSX标记的是这样的:
trigger={
<div>
<div className="col-sm-3">
Text
</div>
<div className="col-sm-3">
Text
</div>
<div className="col-sm-3">
Text
</div>
</div>
}
相反,你应该把代表内{}
const Confirmation = ({ title, onConfirm, hideModal }) => {
const handleSubmit = (values) => {
hideModal();
onConfirm(values);
}
const group1 =(
<div>
<div className="col-sm-3">
Text
</div>
<div className="col-sm-3">
Text
</div>
<div className="col-sm-3">
Text
</div>
</div>
)
const group2 =(
<div className="col-sm-3">
<button className="btn btn-success"
type="button">Test</button>
<button className="btn btn-danger"
type="button">Test</button>
</div>
)
return (
//remove onClose if the Modal should only be closed via clicking one of the buttons
<Modal title={title} onClose={() => hideModal() }>
{/* <UserCreation mySubmit={handleSubmit}/> */}
<div className="row">
<Collapsible
trigger={group1}
triggerSibling={group2}>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
<p>Teest</p>
</Collapsible>
</div>
</Modal>
);
一个JSX组件的变量现在,如果你点击对这些“文本”的div,你将在“teest”出现
+0
Thx为解决方案。非常感谢帮助。 – Gh05d
+0
不客气! –
请发布功能的完整列表,(假设它是在'渲染()'功能) –
我现在发布了完整的代码。看起来可折叠的内容似乎不在可折叠的内部,而是在左边。我只能假设将整个可折叠的行装入行内是这种行为的根源。但是,当用户点击行内的某个位置时,我想要打开折叠,但是当单击按钮时不会打开折叠。我似乎无法得到它的工作。 – Gh05d