时间戳

首页 > 解决方案 > 如何在 React Native 中实现点击编辑、选择项目和删除功能

reactjs - 如何在 React Native 中实现点击编辑、选择项目和删除功能

问题描述

在下面的屏幕截图中，当用户单击标题上的编辑按钮时，保存到购物车的文本 X 的组件需要更改。基本上，一个复选框会出现在所有包含 X 保存到购物车的组件的右侧。我该如何实现这一点。

我认为这样做的一种方法是当用户单击标题上的编辑按钮时，将以某种方式通知将 X 保存到购物车的组件，然后我可以更改组件的视图。

这是实现编辑功能的正确方法吗？如果不是，如何做到这一点？

PS 我没有使用 Redux。屏幕截图下方提供的代码。

在此处输入图像描述

代码

已保存交易页面（点击标签栏上的心形图标时显示此页面）

export const SavedDealsPageStack = createStackNavigator ({
    SavedDeals: {
        screen : savedDealsPage,
        navigationOptions:{
            header: <SavedDealHeader />
        }        
    },
    DealsDetailPage:{
        screen : DealsDetailPageStack,
    },
},
{
    navigationOptions:{
        header: null
    }
});

SavedDealHeader 组件

导出默认类 SavedDealHeader 扩展组件 {

    render(){
        return (
            <View style={styles.savedDealHeaderContainer}>
                <View style={styles.headerComponentDivider}>
                    <View style={styles.headerTitleContainer}>
                        <Text style={textStyles.savedDealHeaderTitle}>Temp List</Text>
                    </View>
                    <View style={{paddingRight:edgePadding}}>
                        <Text style={textStyles.editButton}>Edit</Text>
                    </View>
                </View>
            </View>
        )
    }
}

列表项正在使用 React native 的 FlatList 组件呈现

调用 Card 组件来渲染列表中的每个项目（该组件位于不同目录中的单独 JS 页面中）。

标签： reactjsreact-nativereact-navigation

解决方案

顶级导航组件可以在其状态下跟踪当前模式。然后，如果你通过 props 将这个 'mode' 变量传递给每个较低的组件，当 state.mode 发生变化时，较低组件的 props 也会发生变化，导致它们重新渲染并显示复选框。然后，您可以进一步添加添加任何条件以仅在已选中或您希望的情况下显示复选框。请参阅下面的数据流向较低组件的简化示例。

function SaveCartCheckBox(props) {    
    if(!props.mode){
      return false;
    }
    return (
      <div className="item">
        <h3>X Saved to Cart</h3>
        <input 
        type="checkbox"
        defaultChecked={props.saved}
        {...(!props.saved ? {checked:false} : {})}        
        onClick={() => props.onClick()}
        />
        </div>
    );
}

class App extends React.Component {

    constructor(props){
      super(props);

      this.state = {
        editmode: true,
        savedItems : {
          1 : false,
          2 : false,
          3 : true
        }
      };

    }
    
    saveItem(itemNo) {    
      let savedItems = this.state.savedItems;
      savedItems[itemNo] = !savedItems[itemNo];
      this.setState({
        savedItems
      });
    }
    
    
    changeMode(){
      const currentMode = this.state.editmode;      
      this.setState({
        editmode: !currentMode
      });
    }

    render() {
        return (
            <div>
             <button onClick={() => {this.changeMode()}}>Change Mode</button>
              {
                  Object.keys(this.state.savedItems).map((index,itemState) => {                         return (
                      <SaveCartCheckBox key={index} 
                      onClick={() => this.saveItem(index)} 
                      saved={this.state.savedItems[index]} 
                      mode={this.state.editmode}
                      />
                  )})
              }     
          </div>
        )
    }

}

ReactDOM.render(
  <App/>,
  document.getElementById("react")
);
.item {
  display:block;
  border:2px solid grey;
  background:lightgreen;
  margin:0.2em;
  text-align:center;
}
input[type='checkbox']{
  zoom:2;
  position:relative;
  bottom:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="react"></div>

推荐阅读