Question

当我将一个React组件从一个<div>移到另一个时，它会失去其状态。有没有办法使这种情况不发生？

这是一个带有简化代码的codepen示例，用于演示该问题。在此Codepen中，如果单击第一个按钮，它将更改该按钮的文本。如果单击第二个按钮，它将把第一个按钮移到另一个div，并且Label失去其状态，并且将恢复为其原始状态。

这是该密码笔的代码：

class CompMoveTest extends React.Component {
  state = {showInFirstDiv: true};

  render() {
    if (this.moveableButton === undefined)
      this.moveableButton = <Button />
    return (
      <div>
        <div>{this.state.showInFirstDiv && this.moveableButton}</div>
        <div>{!this.state.showInFirstDiv && this.moveableButton}</div>
        <button onClick={() => this.setState({showInFirstDiv: !this.state.showInFirstDiv})}>Click me second</button>
       </div>
    );
  }
}

class Button extends React.Component {
  state = {text:"Click me first to change text"};
  render() {
    return <button onClick={() => this.setState({text: "Now click the other button to move me to another div"})}>{this.state.text}</button>
  }
}

如何防止React Component在移动时丢失状态

0 个答案: