Изменить состояние всякий раз, когда нажимается кнопка назад и вперед в React? - PullRequest
Новая
       20

Изменить состояние всякий раз, когда нажимается кнопка назад и вперед в React?

0 голосов
/ 25 февраля 2019

Итак, я знаю, как изменить состояние при нажатии кнопки один раз, но как бы я изменил новое состояние обратно на предыдущее состояние при повторном нажатии кнопки?

Ответы [ 4 ]

0 голосов
/ 25 марта 2019

в состоянии: 

this.state = {toggleBtn: ""}

в вашей кнопке: 

<button key="btn1" onClick={() => this.clickhandler(btn1)}>
   {this.state.toggleBtn === ID? "-" : "+"}
</button>

в вашем обработчике кликов: 

clickhandler(ID) {

if (this.state.toggleBtn === ID) {
        this.setState({ toggleBtn: "" });
    } else {
        this.setState({ toggleBtn: ID});
    }
0 голосов
/ 25 февраля 2019

Вы должны сохранить предыдущее состояние.Вы даже можете сделать предыдущее состояние частью вашего фактического состояния, но я оставлю это как упражнение для OP (Примечание: вы можете сохранить полную историю предыдущих состояний, используя эту технику).К сожалению, я пока не могу писать примеры из головы, используя новую функцию ловушек: 

class MyComponent extends ReactComponent {
  prevState = {}
  state = {
    isActive: false,
    // other state here
  }

  handleClick = () => {
    // should probably use deep clone here
    const state = Object.assign({}, this.state);

    this.setState(state.isActive ? this.prevState : Object.assign(state, { 
      isActive: true,
      // other state here
    });

    this.prevState = state;
  }

  render() {
    return <button onClick={this.handleClick}>Toggle State</button>
  }
}
0 голосов
/ 25 февраля 2019

Вы можете просто переключать состояние.

Вот пример использования компонента: 

class ButtonExample extends React.Component {
  state = { status: false }

  render() {
    const { status } = this.state;
    return (
      <button onClick={() => this.setState({ status: !status })}>
        {`Current status: ${status ? 'on' : 'off'}`}
      </button>
    );
  }
}

Вот пример использования hooks (доступно в v16.8.0): 

const ButtonExample = () => {
  const [status, setStatus] = useState(false);

  return (
    <button onClick={() => setStatus(!status)}>
      {`Current status: ${status ? 'on' : 'off'}`}
    </button>
  );
};

Вы можете изменить 'on' и 'off' на все, что хотите переключить.Надеюсь, это поможет!

0 голосов
/ 25 февраля 2019

Рассмотрим этот пример: https://jsfiddle.net/shanabus/mkv8heu6/6/

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	buttonState: true
    }
    this.toggleState = this.toggleState.bind(this)
  }
  
  render() {
    return (
      <div>
      <h2>Button Toggle: {this.state.buttonState.toString()}</h2>                
        <button onClick={this.toggleState}>Toggle State</button>
      </div>
    )
  }
  
  toggleState() {
  	this.setState({ buttonState: !this.state.buttonState })
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Здесь мы используем логическое значение true / false и переключаемся между двумя состояниями.Если вы хотите использовать другие пользовательские данные в качестве своего предыдущего состояния, просто создайте для этого другую переменную.

Например: 

this.state = { previousValue: "test", currentValue: "new thing" }
...