react-native - 如何在 React-native 中动态添加和删除表行

Question

我想开发一个具有动态添加和删除行功能的表。由于我是本机反应的新手，我无法添加表行的动态添加和删除。

我已经尝试了代码，但它不起作用，无法创建我需要的确切解决方案

我希望这张桌子像访问https://3vk7jxv69p.codesandbox.io/

标签： react-native

Answer 1

通过调整数据数组，可以添加、删除项目。例如：

_addRow=(item)=> {
   let dataArray = this.state.data;
   dataArray.push(item);
   this.setState({data: dataArray});
}

_removeRow=(index)=> {
   let dataArray = this.state.data;
   dataArray.splice(index, 1);
   this.setState({data: dataArray});
}

_removeLastRow=()=> {
   let dataArray = this.state.data;
   dataArray.splice(dataArray.length - 1, 1);
   this.setState({data: dataArray});
}

render() {
    return (
       ...
          <FlatList
            data={this.state.data}
            renderItem={this._renderItems}
            keyExtractor={(item, index) => index.toString()}
            extraData = {this.state}
          />
       ...
    );
}