setState для выбранного элемента только в приложении реакции - PullRequest
Новая
       50

setState для выбранного элемента только в приложении реакции

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

В моем приложении реакции у меня есть несколько флажков, и я переключаю проверенное состояние с помощью onClick, оно устанавливает состояние, но меняет его для всех флажков на странице, я хочу только нажатые, вот код:

Исходное состояние: 

state: {checked: false}

Флажок: 

return boxes.map(box => (
<Checkbox checked={this.state.checked} onClick={() => this.onCheck(box.id)} />
))

Функция: 

onCheck(id) { this.setState({ checked: !this.state.checked }); }

Ответы [ 2 ]

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

Это меняет все флажки, потому что все флажки ссылаются на одну и ту же переменную в состоянии. Вы можете хранить их идентификаторы в массиве: 

state: {
  checkedIdArray: []
}

Затем проверьте, находится ли идентификатор текущего блока в массиве, чтобы определить, проверен ли он: 

<Checkbox
  key={box.id}
  checked={this.state.checkedIdArray.includes[box.id]}
  onClick={() => this.onCheck(box.id)}
/>

Наконец, ваш метод onCheck () будет выглядеть примерно так: 

onCheck(id) {
  if (this.state.checkedIdArray.includes(id)) {
    this.setState({
      checkedIdArray: this.state.checkedIdArray.filter((val) => val !== id)
    });
  } else {
    this.setState({
      checkedIdArray: [...this.state.checkedIdArray, id]
    });
  }
}

Не проверял или что-нибудь, но что-то вроде этого должно привести вас туда, куда вы хотите.

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

Тогда вам нужно будет иметь одну переменную состояния для каждого флажка. Для простоты давайте поместим все логические значения, определяющие, был ли установлен n-й флажок в одном массиве.

Вы можете написать минимальный компонент, подобный этому: 

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { boxes: [{id: 10}, {id: 20}] };
    this.state.checked = this.state.boxes.map(() => false);
    this.onCheck = this.onCheck.bind(this);
  }
  onCheck(id) {
    let index = this.state.boxes.findIndex(box => box.id==id);
    this.setState({
      checked: this.state.checked.map((c,i) => i==index ? !c : c)
    })
  }
  render() {
    return (
      {this.state.boxes.map((box,i) => (
         this.onCheck(box.id)}
        />
      ))}
      this.state = {JSON.stringify(this.state,null,2)}
); } } ReactDOM.render (, document.querySelector ('# root')); 
<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="root"></div>
...