Question

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

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

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

P.S。我没有使用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页面中）。

Answer 1

顶级导航组件可以跟踪处于其状态的当前模式。然后，如果您通过prop将此“模式”变量向下传递给每个下部组件，则当state.mode更改时，下部组件的prop也随之更改，从而使它们重新呈现并显示一个复选框。然后，您可以进一步添加添加任何条件，以仅在复选框已选中或希望时显示该复选框。请参见下面的数据流向下部组件的简化示例。

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>

我如何在React Native中实现点击编辑，选择项目并删除功能

1 个答案: