Question

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

更新根据要求，这是完整的课程。它目前位于模态组件中：

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);

Answer 1

这是你的主要问题。这是因为你不应该用这种方式组成一些jsx标记：

{}

相反，您应该在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组件的变量

{{1}}

现在，如果您点击这些文字＆＃39; div，你会选择＆＃39; teest＆＃39;出现

https://jsfiddle.net/icenine/w3advz9u/

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

1 个答案: