Question

我想创建一个按钮，这样当我点击它时，它会显示一个文本，然后在第二次点击时，消失，在第三次，再次出现......等等。

  class App extends Component {
   constructor() {
    super();
    this.state = {
      isShow: false,
    }      
   this.createText = this.createText.bind(this);
   this.condrender = this.condrender.bind(this);
    }

createText() {
 this.setState({ isShow: true });
}

 condrender() {
  if (this.state.isShow===true) {
   return (
    <p>THIS TEXT</p>
   ); 
 }
}

 render() {
   return (
    <div className="App">
     <button onClick={this.createText}>Click</button>
      {this.condrender()}
    </div>
     );
   }
  }
 }

使用此代码，单击按钮时会显示文本。所以我添加了这一行this.setState({isShow: false})，我收到了一个错误。

  condrender() {
    if (this.state.isShow===true) {
     this.setState({isShow: false})
     return (
      <p>THIS TEXT</p>
      ); 
     }
    }

警告：在现有状态转换期间无法更新（例如在render或另一个组件的构造函数中）。渲染方法应该是道具和国家的纯粹功能;构造函数的副作用是反模式，但可以移动到componentWillMount

我的想法是，在我将其设置为false后，文本将消失，因为isShow的状态将为false。请帮我理解错误以及如何解决这个问题？

Answer 1

这是非常直接的前进。在每次点击时，您只需将状态设置为与自身相反的状态。您可以使用三元渲染。

＆＃13;

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';

class App extends React.Component 
{
  constructor() 
  {
    super();
    this.state = 
    {
      isShow: false,
    }
    this.ToggleText = this.ToggleText.bind(this);
  }

  ToggleText() 
  {
    let state = { ...this.state };
    state.isShow = !state.isShow;
    this.setState(state);
  }

  render() 
  {
    let element = <p>THIS TEXT</p>
    
    return (
      <div className="App">
        <button onClick={this.ToggleText}>Click</button>
        {
          this.state.isShow ? element : null
        }
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

＆＃13;

Answer 2

显示此警告，因为您在render方法中调用方法，然后尝试在该方法中设置状态。

相反，你可以做的是：

class App extends Component {
   constructor() {
    super();
    this.state = {
      isShow: false,
    }      
   this.createText = this.createText.bind(this);
   this.condrender = this.condrender.bind(this);
    }

createText() {
 this.setState({ isShow: !this.state.isShow});
}

 condrender() {
   return (
    <p>THIS TEXT</p>
   ); 
 }
}

 render() {
   return (
    <div className="App">
     <button onClick={this.createText}>Click</button>
      {this.state.isShow ? this.condrender() : null}
    </div>
     );
   }
  }
 }

希望它有所帮助。

Answer 3

将状态设置为前一状态的指示，所有操作都将完成！

createText() { this.setState({ isShow: !this.state.isShow }); }

如何在react.js中创建一个按钮，使文本切换显示为消失？

3 个答案: