可折叠消失中的反应可折叠文本

-1

我正在使用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);

来源

2017-04-12 Gh05d

请发布功能的完整列表，（假设它是在'渲染（）'功能） –

我现在发布了完整的代码。看起来可折叠的内容似乎不在可折叠的内部，而是在左边。我只能假设将整个可折叠的行装入行内是这种行为的根源。但是，当用户点击行内的某个位置时，我想要打开折叠，但是当单击按钮时不会打开折叠。我似乎无法得到它的工作。 – Gh05d

这是你的主要问题。这是因为你不应该构成一些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”出现

来源

2017-04-12 23:45:34

Thx为解决方案。非常感谢帮助。 – Gh05d

不客气！ –

可折叠消失中的反应可折叠文本

回答

相关问题