Question

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

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

我在上面的代码中做错了什么？可以请一些人帮忙。提前谢谢

Answer 1

您似乎需要使用新的rowData更新dataSource。我猜你试图用每个touchableHighlight onPress增加rowData.i

renderRow的第3个参数是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。似乎它应该使用数据源状态呢？

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

React-native动态生成带图像的TouchableHighlight

1 个答案: