4

这是我的示例代码，我希望ListView在点击时更新元素。

此行定义样式：

(this.state.selectedField.id==field.id)?'green':'white'

在此示例中，活动View应以绿色突出显示。内部状态正在更新handleClick()，但renderField()没有调用方法。

如何使 ListView 在单击触发的状态更改时重新呈现？

RNPlayNative 链接

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

class SampleApp extends Component {

  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
    });
    this.state = {
      fields: ds.cloneWithRows([
        {id:0},{id:1},{id:2}
      ]),
      selectedField: {id:0}
    };
  }

  handleClick(field) {
    console.log("Selected field:",field);
    this.setState({
      selectedField: field
    });
  }

  renderField(field) {
    return (
      <TouchableOpacity onPress={this.handleClick.bind(this, field)} >
        <View style={{backgroundColor:(this.state.selectedField.id==field.id)?'green':'white'}}>
          <Text style={{left:0, right:0, paddingVertical:50,borderWidth:1}}>{field.id}</Text>
        </View>
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View>
        <ListView
          dataSource={this.state.fields}
          renderRow={this.renderField.bind(this)}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('SampleApp', () => SampleApp);
4

3 回答 3

3

当 dataSource 更改时，列表会再次呈现，并且在您的示例中，由于 dataSource 永远不会更改，因此 listview 永远不会重新呈现。这可以通过在状态变量中添加一个字段来保存 dataSource 的数据来实现。在 componentDidMount 方法中，让 dataSource 克隆具有数据状态变量的行。每当您想重新渲染列表视图时，您只需更改数据状态变量，列表将自动重新渲染。我已经更改了您的数据，以便为每个对象添加一个选定状态。这是更新的代码。

class SampleApp extends Component {

  constructor(props) {
     super(props);
     var ds = new ListView.DataSource({
         rowHasChanged: (row1, row2) => row1 !== row2,
    });
     var dataVar = [
         {
           id:0,
           selected: true,
         },{
           id:1,
           selected: false,
         },{
           id:2,
           selected: false,
         }
       ];
     this.state = {
       data: dataVar,
       fields: ds,
     };
   }

   componentDidMount() {

     this.setState({
       fields: this.state.fields.cloneWithRows(dataVar)
     });
   }


   handleClick(field) {
     console.log(field);
     field.selected = !field.selected;

     var dataClone = this.state.data;
     console.log(dataClone);

     dataClone[field.id] = field;

     this.setState({
       data: dataClone,
     });
   }

   renderField(field) {
     let color = (field.selected == true)?'green':'white';
     return (
       <TouchableOpacity onPress={this.handleClick.bind(this, field)} >
         <View style={{backgroundColor:color}}>
           <Text style={{left:0, right:0, paddingVertical:50,borderWidth:1}}>     {field.id}</Text>
         </View>
       </TouchableOpacity>
     );
   }

   render() {
     return (
       <View>
         <ListView
           dataSource={this.state.fields}
           renderRow={(field) => this.renderField(field)}
         />
       </View>
     );
   }
 }

这是一个有效的 rnplay示例

于 2016-07-07T20:13:30.210 回答
1

已经回答过很多次了，如果你想改变一个道具上的行渲染，如果你想更新行，这个道具需要进入你的数据。

请参阅以下 2 个答案：

于 2016-07-07T13:56:42.710 回答
0

这是我对该问题的解决方案，但处理每次点击仍然需要很长时间：

handleClick(field) {
  newFields = this.state.fields.map( (x) => x.key === field.key && x.active !== true ? {...x,active:true} : {...x,active:false})  
  this.setState({
    fields:newFields,
    dataSource: this.state.dataSource.cloneWithRows(newFields)
  });
}
于 2016-07-07T15:29:36.723 回答