React native - 改变动态元素的状态答案

【问题标题】：React native - change state of dynamic elementsReact native - 改变动态元素的状态
【发布时间】：2019-03-16 18:18:02
【问题描述】：

我正在尝试循环数组以呈现列表中的项目（在 react native 中）。每个项目都有一个按钮。当有人单击它时，如何更改此特定按钮的背景颜色？我已经尝试过 .setState 但问题是，它会改变列表中每个按钮的背景颜色。

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

我能做什么？有没有办法动态创建新状态？

谢谢。

【问题讨论】：

标签： reactjs react-native mobile native expo

【解决方案1】：

你可以采取这样的方法：

 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"/>

react demo 虽然恕我直言，同样应该适用于 RN。

【讨论】：