Beim Rendern der Listview, warum wurde der Wert in früheren <TextInput/> gehalten?

Question

Hier ist der Code:

var FAKE_DATA = [ 
{ 
    type: 0, 
}, 
{ 
    type: 1, 
},] 

var FAKE_DATA_2 = [ 
{ 
    type: 0, 
}, 
{ 
    type: 1, 
}, 
{ 
    type: 2, 
},] 

export default class testpage extends React.Component { 
constructor(props) { 
    super(props) 

    let listData = new ListView.DataSource({ 
     rowHasChanged: (p1, p2) => { 
      p1 !== p2 
     }, 
    }); 

    this.state = { 
     data: listData.cloneWithRows(FAKE_DATA) 
    } 
}; 

render() { 
    return (
     <View style={{ flex: 1 }}> 
      <ListView 
       style={{ flex: 1 }} 

       dataSource={this.state.data} 
       renderRow={this.renderRow} /> 


      <TouchableOpacity 
       onPress={() => { 
        this.setState({ 
         data: this.state.data.cloneWithRows(FAKE_DATA_2) 
        }) 
       } } 
       style={{ height: 40, backgroundColor: 'green' }} 
       /> 

     </View> 
    ); 
} 


renderRow(data) { 
    return (
     <TextInput style={{ height: 40, }} /> 
    ) 
}} 

Und wenn ich etwas in TextInput- eingegeben und auf die Schaltfläche klicken, wurde die Listenansicht aktualisiert, aber der Wert in TextInput- bleibt in neuen textinput.Is es Fehler oder einfach nur so, wie es funktioniert? Wie man es vermeidet?

Answer 1

Ja. Sie müssen Ihren Texteingang beim Klicken auf die Schaltfläche manuell löschen. Sie können dies versuchen:

clearText: function() { 
    this._textInput.setNativeProps({text: ''}); 
    }, 

Rufen Sie einfach diese Funktion auf Knopf klicken.

Answer 2

Wenn Sie den TextInput-Wert prop an die Daten in renderRow binden, sollte es es aufnehmen.

Außerdem haben Sie ein Problem in Ihrem ListView.DataSource initializer:

rowHasChanged: (p1, p2) => { 
    p1 !== p2 
}, 

Die Funktion korrekt ist, aber ich ist nicht in den Klammern der Rückkehr so ​​dass es nie die Zeile geändert hat sagen.

Es sollte

rowHasChanged: (p1, p2) => p1 !== p2, 

oder

rowHasChanged: (p1, p2) => { 
    return p1 !== p2 
},