React setState не обновляет переключатель при нажатии, когда я использую несколько состояний - PullRequest
Новая
       13

React setState не обновляет переключатель при нажатии, когда я использую несколько состояний

0 голосов
/ 02 мая 2020

Я - реагирующий js новичок, и я нахожусь на своем пути изучения этого. Я пробовал состояние и менял состояние, используя setState .Это работало нормально для меня. Но когда я пытаюсь использовать несколько состояний и мне нужно более одного изменения состояния, это не работает. ie: - В дополнение к предыдущему изменению состояния, при нажатии кнопки я хочу включить и выключить, используя toggleOn. Когда я пытаюсь это сделать, мое первое изменение состояния при нажатии работает нормально, и я могу изменить абзац данные, где я хочу. но я не могу заставить кнопку переключаться.

я прикрепляю свой код app.js, где мой класс root определяет.

первый код, который отлично работает ############### 

import React, { Component } from 'react';

import './App.css';
import Person from './Person/Person';

class App extends Component {
  state={
    persons:[
      {name:'sheikha' , age : '23'},
      {name :'resmina' , age: '23'},
      {name :'alena' , age: '29'},
      {name :'dolly' , age: '25'},
    ]
  }
  switchNameHandler =() =>{
    // console.log('its clicked now!');
    this.setState({
      persons:[
        {name:'sheikha nazreen' , age : '23'},
      {name :'resmina' , age: '23'},
      {name :'alena' , age: '27'},
      {name :'dolly' , age: '25'},
      ]
    })
  }
  render() {
    return (
      <div className="App">
        <h1>i am a react developer</h1>
        <p>ewfkjoj</p>
        <button onClick={this.switchNameHandler}>click here to change</button>
        <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
        <Person name={this.state.persons[1].name} age={this.state.persons[1].age}/>
        <Person name={this.state.persons[2].name} age={this.state.persons[2].age}>hoby:racing</Person>
        <Person name={this.state.persons[3].name} age={this.state.persons[3].age}/>
      </div>

    );
    // return React.createElement('div',{className:'App'},React.createElement('h1',null,'now its working?'));
  }
}

export default App;

второй код: использование нескольких состояний не работает! ##### ########## 

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import Person from './Person/Person';

class App extends React.Component {
  state={
    persons:[
      {name:'sheikha' , age : '23'},
      {name :'resmina' , age: '23'},
      {name :'alena' , age: '29'},
      {name :'dolly' , age: '25'},

    ],
    isToggleOn : true

  }
  // handleClick=this.handleClick.bind(this);
  handleClick = (e) =>{
    // console.log('its clicked now!');
    this.setState(prevState =>({
      isToggleOn : !prevState.isToggleOn
    }));
  }
  // this.state={isToggleOn : true};
  switchNameHandler = () =>{
    // console.log('its clicked now!');
    this.setState({
      persons:[
        {name:'sheikha nazreen' , age : '23'},
      {name :'resmina' , age: '23'},
      {name :'alena' , age: '27'},
      {name :'dolly' , age: '25'},
      ]
    })
  }
  render() {
    return (
      <div className="App">
        <h1>i am a react developer</h1>
        <p>ewfkjoj</p>

        <button onClick={this.switchNameHandler}>click here to change</button>
        <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
        <Person name={this.state.persons[1].name} age={this.state.persons[1].age}/>
        <Person name={this.state.persons[2].name} age={this.state.persons[2].age}>hoby:racing</Person>
        <Person name={this.state.persons[3].name} age={this.state.persons[3].age}/>

        <button onClick={(e) => this.handleClick}>{this.isToggleOn ? 'ON' : 'OFF'}</button>

      </div>

    );
    // return React.createElement('div',{className:'App'},React.createElement('h1',null,'now its working?'));
  }
}

export default App;
#

моя проблема в том, что у меня не может быть кнопки. Если кто-то может мне помочь, пожалуйста. Можете ли вы сказать мне, как переписать мой код?

1 Ответ

0 голосов
/ 02 мая 2020

измените свой код на: 

<button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>

здесь, handleClick должен быть передан напрямую, если вы не передаете никаких дополнительных параметров.

...