Как удалить это значение ключа в функцию Delete в React Native.

Question

Я могу добавлять и получать данные из базы firef, но я не получаю как передать значение ключа для удаления функции Я загрузил свою структуру хранения данных 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) в функции удаления, но ошибка как значение ключа не получается. Пожалуйста, проверьте мою функцию удаления и какнеправильно, я делаю, пожалуйста, помогите мне.

Answer 1

Я думаю, что эта ссылка должна вам помочь, она описывает, как передавать аргументы обработчикам событий в реакции.

Действительно, их пример именно об удалении элемента с помощью кнопки. Обработчик onClick:

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

Вам просто нужно предоставить ключ (где в их примере «id») и обновить прототип до deleteRow, чтобы получить аргумент.