React native - изменение состояния динамических элементов - PullRequest
Новая
       42

React native - изменение состояния динамических элементов

1 голос
/ 16 марта 2019

Я пытаюсь восстановить массив для отображения элементов в списке (в реагирует на родной ).У каждого предмета есть кнопка.Как я могу изменить цвет фона этой конкретной кнопки, когда кто-то нажимает на нее?Я уже пробовал .setState, но проблема в том, что он меняет цвет фона каждой кнопки в списке. 

 this.setState({btnColor: 'red' });

Что я могу сделать?Есть ли способ динамически создавать новые состояния?

Спасибо.

1 Ответ

1 голос
/ 16 марта 2019

Вы можете воспользоваться таким подходом: 

 class App extends React.Component {
  state = {
    colors: {},
    btnIds: [1, 2, 3]
  };

  render() {
    return (
      <div>
        {this.state.btnIds.map(x => (
          <button
            onClick={() => {
              this.setState(ps => ({
                colors: {
                  ...ps.colors,
                  [x]: "red"
                }
              }));
            }}
            style={{ backgroundColor: this.state.colors[x] || "" }}
          >
            {x}
          </button>
        ))}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script>
<div id="root"/>

реагировать демо, хотя ИМХО то же самое должно применяться к RN.

...