0

我有一个表单，用户可以选择三个成员选项之一。我正确渲染了屏幕，但按钮切换不起作用。当我单击其他按钮时，勾号仍停留在第一个选项上。这是我的代码

<View style={styles.mainview}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) =>
              <TouchableHighlight onPress={() => this.toggleOneYear(rowData.id, rowData.i)} style={styles.registerButton} underlayColor='#ffffff'>
                <View style={styles.detailBoxTick}>
                  {renderIf(rowData.i == 1)(
                    <Image style={styles.imageTickStyle} source={this.state.payoneyear ? Images.rememberTickImg : Images.rememberUnTickImg} />
                  )}
                  {renderIf(rowData.i == 2)(
                    <Image style={styles.imageTickStyle} source={this.state.paytwoyear ? Images.rememberTickImg : Images.rememberUnTickImg} />
                  )}
                  {renderIf(rowData.i == 3)(
                    <Image style={styles.imageTickStyle} source={this.state.paythreeyear ? Images.rememberTickImg : Images.rememberUnTickImg} />
                  )}
                  <Text style={styles.tickBoxText}>
                    {rowData.card_duration} years Membership ${rowData.price}
                  </Text>
                </View>
              </TouchableHighlight>
            }
            enableEmptySections
          />
        </View>

toggleOneYear(id, counter) {

    if (counter == 1) {
      console.log('counter ', counter)
      console.log('payoneyear ', this.state.payoneyear)
      this.setState(
        {
          payoneyear: true,
          paytwoyear: false,
          paythreeyear: false
        }
      )
      console.log('payoneyear ', this.state.payoneyear)
    }
    else if (counter == 2) {
      console.log('counter ', counter)
      console.log('payoneyear ', this.state.paytwoyear)
      this.setState(
        {
          payoneyear: false,
          paytwoyear: true,
          paythreeyear: false
        }
      )
      console.log('paytwoyear ', this.state.paytwoyear)
    }
    else if (counter == 3) {
      console.log('counter ', counter)
      this.setState(
        {
          payoneyear: false,
          paytwoyear: false,
          paythreeyear: true
        }
      )
    }
  }

我在上面的代码中做错了什么？有人可以帮忙吗？提前致谢

4

1 回答 1

2

看起来您需要dataSource使用新的 rowData 更新。我猜你想增加rowData.i每个 touchableHighlight onPress？

renderRow 的第三个参数是rowID. 我们将需要它来知道我们需要更新哪一行。您可以将它传递给toggleOneYear或在 TouchableHighlight onPress 中放入以下内容：

  var newArray = this.state.db.slice();
  newArray[rowID] = {
    // increment i, keep between 1-3
    i: newArray[rowID].i + 1 > 3 ? 1 : newArray[rowID].i + 1,
  };
  this.setState({
      dataSource: this.state.dataSource.cloneWithRows(newArray),
      db: newArray,
  });

我不确定您对payxxxyear状态变量的意图是什么，因为它们只有 3 个属性，并且您正在呈现列表数据，所以我假设您有许多 TouchableHighlights 将使用相同的状态。似乎它应该使用数据源状态来代替？

顺便说一句，ListView 在最新的 RN 版本中已被弃用。https://facebook.github.io/react-native/docs/listview.html#renderrow

于 2017-12-03T19:20:27.740 回答