可摺疊消失中的反應可摺疊文本

-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

不客氣！ –

可摺疊消失中的反應可摺疊文本

回答

相關問題