Question

我有一个简单的显示/隐藏样式，需要在点击事件上切换。这就是我所拥有的：

  constructor(props) {
    super(props);
    this.state = {iover: 'hide'}
  }

  handleClick(event) {  
    // this is wrong, it returns a true or false    
    this.setState({ iover: !this.state.iover });
    // this doesn't toggle
    // this.setState({ iover: this.state.iover = 'hide' ? this.state.iover = 'show' : this.state.iover ='hide' });
    event.preventDefault()
}

我想在＆＃39; show＆＃39;之间切换this.state.iover值。＆安培; ＆＃39;隐藏＆＃39;

最优雅的方式是什么。

Answer 1

实现此目的的一种方法是将状态保持为布尔值true或false，然后将三元运算符放在您想要值的任何位置＆＃34;隐藏＆＃34;或＆＃34;显示＆＃34;。例如：

  getInitialState: function() {
    return {
      iover: false
    };
  },

  handleClick: function() {
    this.setState({
      iover: !this.state.iover
    });
  },

  render: function(){
    return (
      <div className={this.state.iover ? 'show' : 'hide'}>...</div>
    );
  }

Answer 2

虽然这对我来说是一个小挑战，但我最终还是这样 -

class Toggle extends React.Component{

constructor(props){
    super(props);
    this.handleToggleVisib = this.handleToggleVisib.bind(this);
    this.state = {
         visib : false 
    }
}

handleToggleVisib(){
    this.setState({ visib : !this.state.visib });
}

render(){
    return(
        <div>
        <h1>Toggle Built</h1>
        <button onClick={this.handleToggleVisib}>
        {this.state.visib? 'Hide Button' : 'Show Button'}
        </button>
        <div>
        {this.state.visib && <p>This is a tough challenege</p>}
        </div>
        </div>
      );
    }
}

 ReactDOM.render(<Toggle />,document.getElementById('app'));

Answer 3

我认为@ mark-anderson的答案是最“优雅”的方式，但是，建议进行状态切换的方式（根据React docs）是：

this.setState(prevState => ({
  iover: !prevState.iover
}));

*如果您需要在该状态内存储“显示/隐藏”，则代码为：

this.setState(prevState => ({
  iover: prevState.iover === 'hide' ? 'show' : 'hide'
}));

Answer 4

这是我能想到的最好的，希望能有更短的东西：

    handleClick(event) {
      let show = this.state.iover;
      let index = show.indexOf('show');

      if (index != -1) {
          show = 'hide';
      } else {
          show = 'show';
      }

      this.setState({ iover: show });
      event.preventDefault()
}

Answer 5

React的一个非常方便的小工具叫做classnames（https://github.com/JedWatson/classnames）

它允许您有条件地渲染一个类，您可以使用它来添加隐藏/显示所需的样式。

例如，我在这里用函数切换状态：

state = {
    isOpen: false
}

toggleDropdown = () => {
    const toggledIsOpen = this.state.isOpen ? false : true;

    this.setState({
        isOpen: toggledIsOpen
    });
}

然后，在我的下拉列表的onClick处理程序中，我使用类名来打印class =＆＃34; dropdown＆＃34;或者类=＆＃34;下拉列表是打开的＆＃34;：

// conditionally add 'is-open' class for styling purposes
   const openClass = classNames("dropdown", {
        "is-open": isOpen
   });


return (
    <div className={openClass} onClick={this.toggleDropdown}>[dropdown contents here]</div>
);

Answer 6

constructor(props) {
  super(props);
  this.state = {iover: false}
}

updateState = () {
  this.setState(prevState => ({
    iover: !prevState.iover
  }));
}

render() {
  return (
    <div className={this.state.iover ? 'show' : 'hide'}>...</div>
  );
}

ReactJS - 切换状态的优雅方式

6 个答案: