New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

修复非受控形式下,Collapse 未重新渲染就执行 onChange 回调的问题 #79

Closed
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
4 participants
@lishengzxc

lishengzxc commented Dec 4, 2017

No description provided.

@coveralls

This comment has been minimized.

Show comment
Hide comment
@coveralls

coveralls Dec 4, 2017

Coverage Status

Coverage decreased (-0.8%) to 93.694% when pulling 57c9d58 on lishengzxc:master into 30a7dac on react-component:master.

coveralls commented Dec 4, 2017

Coverage Status

Coverage decreased (-0.8%) to 93.694% when pulling 57c9d58 on lishengzxc:master into 30a7dac on react-component:master.

@@ -96,9 +96,12 @@ class Collapse extends Component {
setActiveKey(activeKey) {
if (!('activeKey' in this.props)) {
this.setState({ activeKey });
this.setState({ activeKey }, () => {
this.props.onChange(this.props.accordion ? activeKey[0] : activeKey);

This comment has been minimized.

@benjycui

benjycui Dec 4, 2017

Member

Nope.

@benjycui

benjycui Dec 4, 2017

Member

Nope.

This comment has been minimized.

@lishengzxc
@lishengzxc

lishengzxc Dec 4, 2017

why nope?

This comment has been minimized.

@afc163
@afc163

afc163 Dec 4, 2017

Member

#78

This comment has been minimized.

@afc163

afc163 Dec 4, 2017

Member

如果有问题,需要给出具体问题的描述和重现。

@afc163

afc163 Dec 4, 2017

Member

如果有问题,需要给出具体问题的描述和重现。

This comment has been minimized.

@lishengzxc

lishengzxc Dec 4, 2017

我有一个非React的组件:

class NoReactComponent { 
  constructor(container) {}
}

然后在Collapse中使用(非受控形式):

class App extends React.Component {

  collapseOnChange = (keys) => {
    // 由于目前的 Collapse,在执行 onChange 的时候
    // 未在 this.setState 的回调中,导致我无法在 onChange 的回调中拿到
    // this.refs.noReactComponentContainer
    // 当然,我可以为 NoReactComponent 通过包装,成为一个 ReactComponent
    // 然后
    // ```
    // <Panel header="This is panel header 1" key="1">
    //  <NoReactComponentToReactComponent />
    // </Panel>
    // ```
    // 或者
    // <Panel header="This is panel header 1" key="1">
    //   <div ref={noReactComponentContainer => { this.noReactComponentInstance = new NoReactComponent(noReactComponentContainer); }}></div>
    // </Panel>
    // 
    // 但是我觉得哪怕从语义上来说也应该在 this.setState 后 执行 onChange 会合适一点
    // 我想 我和 https://github.com/react-component/collapse/issues/78 并不同
    // 你可以仔细看下我的 PR 的 if else,都会执行 onChange

    if (keys.indexOf('1') !== -1) {
      this.noReactComponentInstance = new NoReactComponent(this.refs.noReactComponentContainer);
    } else {
      delete this.noReactComponentInstance;
    }
  }

  render() {
    return (
      <Collapse
        onChange={this.collapseOnChange}
      >
        <Panel header="This is panel header 1" key="1">
          <div ref="noReactComponentContainer"></div>
        </Panel>
        <Panel header="This is panel header 2" key="2">
          <div></div>
        </Panel>
      </Collapse>
    )
  }
}
@lishengzxc

lishengzxc Dec 4, 2017

我有一个非React的组件:

class NoReactComponent { 
  constructor(container) {}
}

然后在Collapse中使用(非受控形式):

class App extends React.Component {

  collapseOnChange = (keys) => {
    // 由于目前的 Collapse,在执行 onChange 的时候
    // 未在 this.setState 的回调中,导致我无法在 onChange 的回调中拿到
    // this.refs.noReactComponentContainer
    // 当然,我可以为 NoReactComponent 通过包装,成为一个 ReactComponent
    // 然后
    // ```
    // <Panel header="This is panel header 1" key="1">
    //  <NoReactComponentToReactComponent />
    // </Panel>
    // ```
    // 或者
    // <Panel header="This is panel header 1" key="1">
    //   <div ref={noReactComponentContainer => { this.noReactComponentInstance = new NoReactComponent(noReactComponentContainer); }}></div>
    // </Panel>
    // 
    // 但是我觉得哪怕从语义上来说也应该在 this.setState 后 执行 onChange 会合适一点
    // 我想 我和 https://github.com/react-component/collapse/issues/78 并不同
    // 你可以仔细看下我的 PR 的 if else,都会执行 onChange

    if (keys.indexOf('1') !== -1) {
      this.noReactComponentInstance = new NoReactComponent(this.refs.noReactComponentContainer);
    } else {
      delete this.noReactComponentInstance;
    }
  }

  render() {
    return (
      <Collapse
        onChange={this.collapseOnChange}
      >
        <Panel header="This is panel header 1" key="1">
          <div ref="noReactComponentContainer"></div>
        </Panel>
        <Panel header="This is panel header 2" key="2">
          <div></div>
        </Panel>
      </Collapse>
    )
  }
}

This comment has been minimized.

@afc163

afc163 Dec 4, 2017

Member

试试 <Collapse destroyInactivePane={false}>

@afc163

afc163 Dec 4, 2017

Member

试试 <Collapse destroyInactivePane={false}>

@benjycui benjycui closed this Dec 4, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment