1
votes

Comment définir la même valeur sur multi var sous this.setState dans React JS

Je suis nouveau dans React. Je veux définir la même valeur pour multi var sous this.setState Comment dois-je écrire le code?

J'ai essayé comme le code suivant mais je ne fonctionne pas ....

export default class StudentForm extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isChecked_1: false,   
      isChecked_2: false,   
      isChecked_3: false,   
      isChecked_4: false,   
      isChecked_5: false,   
      isChecked_6: false,   
    };
  }
  //some code here......
}

// voici mon code:

isChecked_1 = isChecked_2 = isChecked_3 = isChecked_4 = isChecked_5 = isChecked_6: false,

javascript reactjs

1 commentaires

sous this.state = {...}? Ai-je raison?

4 Réponses :

2
votes

Vous pouvez utiliser le code suivant:

export default class StudentForm extends React.PureComponent {
  constructor(props) {
    super(props);
    for (var i = 1, i <= 6, i++) {
       this.state[`isChecked_${i}`] = false;
    }
  }
  //some code here......
}

0 commentaires

0
votes

let isChecked_1 = isChecked_2 = isChecked_3 = isChecked_4 = isChecked_5 = isChecked_6 = false
this.state = {
  isChecked_1, 
  isChecked_2,   
  isChecked_3,   
  isChecked_4,   
  isChecked_5,   
  isChecked_6,   
};

0 commentaires

0
votes

Si vous préférez une implémentation plus déclarative et sans mutations :

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

const getState = length => {
  // Generate N Items, starting from 1
  const items =  Array.from({ length }, (v, k) => k + 1)
  const state = items.reduce((accumulator, i) => (
    { ...accumulator, [`isChecked_${i}`]: false }), {}
  )

  return state
} 

class StudentForm extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = getState(6);
    
    console.log(this.state);
  }
  
  render() {
    return null;
  }
}

ReactDOM.render(
  <StudentForm />,
  document.getElementById('container')
);

0 commentaires

1
votes

Si vous avez des clés répétées, cela indique clairement que vous devez utiliser un tableau à la place:

  const i = 5;
  this.setState(({isChecked }) => ({ isChecked: isChecked.map((checked, i2) => checked || i === i2) }));

Ou simplement:

  this.state = { isChecked: Array(6).fill(false), };

Vous pouvez ensuite le lire comme this.state.isChecked [5] , et définir isChecked sur i:

  this.state = {
    isChecked: [false, false, false, false, false, false],
  };

Pour désactiver, utilisez && i! == i2 dans la ligne ci-dessus.

0 commentaires