Как исправить, столбец, который движется одновременно ReactJs - PullRequest
Новая
       53

Как исправить, столбец, который движется одновременно ReactJs

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

Я хотел бы объяснить свою проблему дня.

в следующем коде я создаю карту и возвращаю ее, после выполнения карты я отображаю 3 столбца, которые отображаются каждый по очереди, потому что он имеет всю разную информацию

, тогда у меня есть кнопка, которая позволяет отображать столбцы один за другим. у этой кнопки есть текст, который изменяется в каждом столбце, в настоящее время он также работает правильно,

проблема и следующая, когда я нажимаю на кнопку, она влияет на все столбцы других данных, которые являются картой, он перемещает все

Я позволю вам посмотреть код, он может быть более значимым

Как я могу исправить эту проблему? 

class AdminPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      statut: 'lancer',
      color: 'red',
    };
    this.onHandleChange = this.onHandleChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.onStart = this.onStart.bind(this);
    this.onPrepared = this.onPrepared.bind(this)
  }

  onChange = (id, status) => {
    const validatedorder = JSON.parse(localStorage.getItem("validated-order") || "{}");
    localStorage.setItem("validated-order", JSON.stringify({ ...validatedorder,
      [id]: status
    }))
    this.setState({
      color: 'red'
    });
    this.setState({
      title: 'Confirmer la livraison'
    })
    console.log('cliqué pour preparation')
    this.setState({
      statut: 'preparation',
      id,
    });
  }

  onChange2 = (id, status) => {
    const validatedorder = JSON.parse(localStorage.getItem("validated-order") || "{}");
    localStorage.setItem("validated-order", JSON.stringify({ ...validatedorder,
      [id]: status
    }))
    this.setState({
      color: 'red'
    });
    this.setState({
      title: 'Confirmer la livraison'
    })
    console.log('cliqué pour preparation')
    this.setState({
      statut: 'livred',
    });
  }
  render() {
      let datas = this.state.data.map((datass, index) => {
      const status = JSON.parse(localStorage.getItem("validated-order") || "{}")[datass.id];
      return (
        <div>
            <div key={datass.id}>
       <div className='Steps'>
           { this.state.statut === 'lancer' &&      
            <div key={datass.id}>
      <Card>
         <Button style={{ backgroundColor: status === undefined || status === false ? "red" : "#4DD5C7" }} disabled={status === false} onClick={() => this.onChange(datass.id, !status)} className="buttonForLancerMaybe">{status === undefined ? "Lancer" : status === true ? "Confirmer la livraison" : "SERVI"}
    </Button>
        </Card>
        </div>
          </div>   
       <div className='Steps'> 
                 { this.state.statut === 'preparation' &&    
             <div>
                  <Card>
                   <Button style={{ backgroundColor: status === undefined || status === false ? "red" : "#4DD5C7" }} disabled={status === false} onClick={() => this.onChange2(datass.id, !status)} className="buttonForLancerMaybe">{status === undefined ? "Lancer" : status === true ? "Confirmer la livraison" : "SERVI"}</Button>
                   <div>  
              <SmsForm phone={datass.phone} />
                  </div>
                </Card>
                </div>
                         }
                 </div> 


                <div className='Steps'> 
             { this.state.statut === 'livred' &&    
               <div>  
              <div> 
               <Button style={{ backgroundColor: status === undefined || status === false ? "transparent" : "#6FEBA6" }} disabled={status === false} onClick={() => this.onChange(datass.id, !status)} className="buttonForLancerMaybeIsForServi">{status === undefined ? "Lancer" : status === true ? "Confirmer la livraison" : "SERVI"}</Button>    
            </Card>
            </div>
                      }
             </div> 
       </ div>

        </div>
...