レスポンスネイティブのリストビュー内にあるスイッチの状態を変更するにはどうしたらいいですか？

Question

私は、対応する1または0の "アクティブ"状態の名前のリストを含むjsonを取り、スイッチを使用して "アクティブ"状態を表すリストビューにそれらを表示する単純なアプリケーションを構築しようとしています。

私はチュートリアルを経て、この思い付いた：Iを

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

：

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); 

これは罰金表示しますが、私はスイッチをクリックしようとすると、私は次のエラーが述べてもらいます反応ネイティブの仕組みについての基本的なことを誤解していなければならないように感じるが、それが何であるかはわからない。 setStateは状態を変更する方法ではありませんか？私はあなたが探していると思う何

Answer 1

はこのようなものである：まず

、代わりに迅速に「矢印機能」アプローチで、あなたの行の機能真のコンポーネントを作ります。これは、個々の行ごとに独自の状態を持たせるために必要です。

class Row extends React.Component 

その後、夫婦簡単な変更を加える：

ここ

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

を、thisは のインスタンスを参照する。そして、あなたの状態を更新上の関数を定義します

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

これは、スイッチの新しい値を取り、それに応じてアクティブ状態を設定します。