如何在react-native中將讀寫數據源項從父視圖傳遞給子視圖？

Question

使用react-native，如何將父視圖，讀寫對象傳遞給子視圖，在哪裏可以修改，然後在子視圖返回父視圖時重新呈現父視圖？

我在導航器中有一個WaypointList ListView。 當用戶選擇一行時，DetailView顯示TextInput進行編輯。

// The Parent "Master View" 
 
var WaypointList = React.createClass({ 
 

 
    getInitialState: function() { 
 
    var ds = new ListView.DataSource({ 
 
     rowHasChanged: (r1, r2) => r1 !== r2 
 
    }); 
 

 
    return { 
 
     itemList: this._genRows(), 
 
     dataSource: ds.cloneWithRows(this._genRows()), 
 
     editEnabled: false, 
 
     planLocked: false, 
 
     selectionCount: 0, 
 
     unitType: 0, 
 
    }; 
 
    }, 
 

 
    // ToDo: Turn this into a real database datasource 
 
    _genRows: function(): Array <any> { 
 
    var arrayList = []; 
 
    var waypoint = new Waypoint('Waypoint1', 0.0, 0.0, 10, true); 
 
    arrayList.push(waypoint); 
 
    waypoint = new Waypoint('Waypoint2', 20.0, 4.0, 10, true); 
 
    arrayList.push(waypoint); 
 
    return arrayList; 
 
    }, 
 

 
    getDataSource: function(waypoints: Array <any>): ListView.DataSource { 
 
    return this.state.dataSource.cloneWithRows(waypoints); 
 
    }, 
 

 
    selectRow: function(waypoint: Object) { 
 
    this.props.navigator.push({ 
 
     title: waypoint.name, 
 
     component: WaypointScreen, 
 
     passProps: { 
 
     waypoint: waypoint, 
 
     }, 
 
    }); 
 
    }, 
 
}); 
 

 
// The Child "Detail View" 
 
// How can I modify an object passed into the "Detail View" 
 
// passProps appears to be read-only ? 
 
var DetailView = React.createClass({ 
 

 
     textInputValue: null, 
 

 
     getInitialState: function() { 
 
     console.log('name:', this.props.person.name); 
 
     console.log('age:', this.props.person.age); 
 
     return { 
 
      textDistance: this.props.waypoint.distance.meters.toString(), 
 
      textDepth: this.props.waypoint.depth.meters.toString(), 
 
     }; 
 
     }, 
 

 
     render: function() { 
 
      return (< View style = { 
 
       { 
 
        flexDirection: 'row', 
 
        justifyContent: 'center' 
 
       } 
 
       } > 
 
       < TextInput style = { 
 
       styles.textInput 
 
       } 
 
       ref = 'distance1' 
 
       placeholder = "Enter meters" 
 
       editable = { 
 
       isEditable 
 
       } 
 
       keyboardType = "decimal-pad" 
 
       returnKeyType = 'next' 
 
       onChangeText = { 
 
       (text) => { 
 
        text = text.replace(/\D/g, ''); 
 
        var meters = parseFloat(text); 
 
        this.setState({ 
 
        textDistance: text 
 
        }); 
 
       } 
 
       } 
 
       value = { 
 
       this.state.textDistance 
 
       } 
 
       onSubmitEditing = { 
 
       (event) => { 
 
        this.refs.depth1.focus(); 
 
       } 
 
       } 
 
       /> 
 

 
     <View style={styles.separatorHorizontal}/> 
 
       < /View> 
 

 
    ); 
 
    }, 
 
});

我開始學習反應本土大約兩週前然而，我沒有接近找出一個解決方案。

PassProps僅用於只讀信息嗎？

如何實現對數據源的讀寫修改？

在此先感謝。

任何提示或方向大加讚賞，

-Ed

Answer 1

你需要設置父的狀態，然後向下傳遞狀態道具給孩子。當子元素更改爲您需要的新值時，您將爲父級設置一個回調函數，以重置父級狀態，然後使用該值重置任何子級的道具。

退房this非常簡單的例子：

https://rnplay.org/apps/huQTKA

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TextInput 
} = React; 

var Parent = React.createClass({ 

    getInitialState() { 
     return { text: '' } 
    }, 

    onChange(text){ 
    this.setState({ text }) 
    }, 

    render() { 
    return (
     <View style={styles.container}> 
     <Text>Hello, { this.state.text }</Text> 
     <Child text={ this.state.text } onChange={ this.onChange } /> 
    </View> 
    ); 
    } 
});  

var Child = React.createClass({ 
    render() { 
    return (
     <View style={styles.container2}> 
     <TextInput onChangeText={ (text) => this.props.onChange(text) } style={ styles.textInput } /> 
     <Text>{ this.props.text }</Text> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    marginTop:50 
    }, 
    container2: { 
    marginTop:25 
    }, 
    textInput: { 
    height: 60, 
    backgroundColor: '#efefef', 
    borderBottomWidth: 1, 
    borderBottomColor: '#ededed', 
    marginTop:13, 
    marginBottom:13 
    } 
}); 

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