Question

我正在尝试构建一个简单的应用程序，该应用程序采用包含名称列表的json及其对应的1或0＆＃34;活动＆＃34;状态并将其显示在表示＆＃34;活动＆＃34;的列表视图上使用开关进行状态。

我完成了教程并想出了这个：

import React, { Component } from 'react';
import {
  AppRegistry,
  Switch,
  Text,
  View,
  ListView
} from 'react-native';

import data from './test-users.json';
// this contains:
// name: a string containing the name
// active: the state of the switch, either 1 or 0.

const Row = (props) => (
  <View>
    <Text>
      {`${props.name}`}
    </Text>
    <Switch value={props.active == 1}
            onValueChange={(value) => this.setState(value)} />
  </View>
);

class ListViewTest extends React.Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(data),
    };
  }
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(data) => <Row {...data} />}
      />
    );
  }
}

export default ListViewTest;

AppRegistry.registerComponent('ListViewTest', () => ListViewTest);

这显示正常，但是当我尝试点击一个开关时，我收到以下错误说明：

undefined is not a function (evaluating '_this.setState(value)')

我觉得我必须误解一些关于反应原生作用的基本内容，但我无法弄清楚它是什么。 setState不是改变状态的方法吗？

Answer 1

我认为你正在寻找的是这样的：

首先，让你的Row函数成为一个真正的组件，而不是快速的箭头函数＆＃39;做法。这是必要的，因此每一行都可以有自己的状态。

class Row extends React.Component

然后，进行一些简单的更改：

onValueChange={this.updateActive.bind(this)}

此处，this引用了Row的实例然后在Row上定义更新状态的函数：

updateActive = (value) => { this.setState({ active : value }) }

这将获取开关的新值，并相应地设置活动状态。

如何在react-native中更改列表视图中的开关状态？

1 个答案: