如何实现单击编辑，选择项目并删除本机中的功能

Question

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

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

这是实现编辑功能的正确方法吗？如果没有，怎么办呢？

附：我没有使用Redux。截图下方提供的代码。

码

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

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

SavedDealHeader组件

导出默认类SavedDealHeader扩展Component {

    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页面中）。

Answer 1

顶级导航组件可以跟踪其状态下的当前模式。然后，如果你通过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>