时间戳

首页 > 解决方案 > 按键删除项目 - 如何将该键值传递给 React Native 中的 Delete 函数

javascript - 按键删除项目 - 如何将该键值传递给 React Native 中的 Delete 函数

问题描述

我能够从 fire-base 添加和获取数据，但我不知道如何将键值传递给 delete 函数我已经上传了我的 firebase 数据存储结构。我需要从数据库中删除项目并呈现剩余项目。 

var data = []
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listViewData: data,
      newTodo: '',
    }
  }


  componentDidMount() {
    var that = this
    firebase.database().ref('/todos').on('child_added', function (snapshot) {
      var newData = [...that.state.listViewData]
      newData.push(snapshot)
      that.setState({ listViewData: newData })
    })
  }

  addRow() {
    if(this.state.newTodo == ''){
      alert('Please enter Todo')
    } else {
      var d = new Date()
      var key = firebase.database().ref('/todos').push().key  //
      firebase.database().ref('/todos').child(key).set({
        id: key,  //key
        title: this.state.newTodo ,
        date: d.getDate()+
        '/'+ (d.getMonth() + 1)+
        '/'+ d.getFullYear()
      })
    }
  }

    deleteRow() { 
    firebase.database().ref('todos' + key).set(null)
    // rowMap[`${secId}${rowId}`].props.closeRow();
    //var newData = [...this.state.listViewData];
    // newData.splice(rowId, 1)
    //this.setState({ listViewData: newData })
  }

  renderSeparator = () => {
    return (
     <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#CED0CE",
        }}
      />
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerText}> ---TODO--- </Text>
        </View>
          <FlatList
            enableEmptySections
            data={this.state.listViewData}
            keyExtractor={(item, index) => item.key}
            ItemSeparatorComponent={this.renderSeparator}
            renderItem={({ item }) => (
              <View>
                <Text style={{fontSize: 18, fontWeight: '100'}}> {item.val().title}</Text>
                <Text style={{fontSize: 14}}> {item.val().date}</Text>
                <TouchableOpacity onPress={ this.deleteRow.bind(this)} style={styles.todoDelete}>
                    <Text style={styles.todoDeleteText}>D</Text>
                </TouchableOpacity>
              </View>
            )}            
          />
        <View>
          <TextInput
            style={styles.textInput}
            onChangeText={(newTodo) => this.setState({ newTodo })}
            placeholder="Add Todo's Here"
          />
          <Button onPress={ this.addRow.bind(this)} style={styles.button}>
            <Text style={styles.buttonText}>ADD</Text>
          </Button>
        </View>
      </View>
    );
  }
}

我在删除函数中尝试了 firebase.database().ref('todos' + key).set(null) ，但没有得到像键值这样的错误。请检查我的删除函数以及我做错了什么，请帮助我。

标签： javascriptreact-nativefirebase-realtime-database

解决方案

我认为这个链接应该可以帮助你，它描述了如何在反应中将参数传递给事件处理程序。

实际上，他们的示例正是关于使用 Button onClick 处理程序删除项目：

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

您只需要提供密钥（在他们的示例中为“id”），并将原型更新为 deleteRow 以获取参数。

推荐阅读