0

我有一个带有两个按钮的 React 组件。当用户单击左键时，它应该改变左键的类，也就是右键的类，它也会渲染 ListView 组件。同样，当用户单击右键时，它应该更改右键的类，以及左键的类，并且它还将呈现 MapView 组件。我在下面的代码中尝试了一些方法。请让我知道，我缺少什么，并让我知道实现这一目标。

提前致谢。

import React, { Component } from 'react';
import { Typography, withStyles, Button} from '@material-ui/core';
import ListView from './listView/ListView';
import MapView from './mapView/mapView';

const styles = {
    boardHeader: {
        display: 'flex'
    },
    boardTitle: {
        flexGrow: 1,
        fontSize: 18,
        fontWeight: 500,
        color: '#ED8E34'
    },
    buttonList: {
        backgroundColor: '#fff',
        borderRadius: 50,
        fontSize: 12,
        minHeight: 10,
        padding: '0px 30px',
        boxShadow: 'none'
    },
    buttonMap: {
        backgroundColor: '#fff',
        borderRadius: 50,
        fontSize: 12,
        minHeight: 10,
        padding: '0px 30px',
        boxShadow: 'none',
        marginLeft: '-10px'
    },
    activeButtonList: {
        backgroundColor: '#fff',
        borderRadius: 50,
        fontSize: 12,
        minHeight: 10,
        padding: '0px 30px',
        zIndex: 1
    },
    activeButtonMap: {
        backgroundColor: '#fff',
        borderRadius: 50,
        fontSize: 12,
        minHeight: 10,
        padding: '0px 30px',
        marginLeft: '-10px'
    },

};

class BoardContent extends Component {

    constructor(props){
        super(props);
        this.state = {
            active: 1,
        }
    }
    onClickList = (e, active) => {
        this.setState({active})
    }
  render() {
      const { classes } = this.props
      const { active } = this.state
    return (
      <div> 
        <div className={classes.boardHeader}>
            <Typography className={classes.boardTitle}>Select the View</Typography>
            <div>
                <Button variant="contained" size="small" className={active === 1 ? classes.activeButtonList : classes.buttonList} onClick={this.onClickList}>LIST VIEW</Button>
                <Button variant="contained" size="small" className={active === 2 ? classes.activeButtonMap : classes.buttonMap} onClick={this.onClickList}>MAP VIEW</Button> 
            </div>
        </div>
        {active === 1 ? <ListView /> : null}
        {active === 2 ? <MapView /> : null}
      </div>
    )
  }
}

export default withStyles(styles)(BoardContent);
4

2 回答 2

0

你需要传递active给this.onClickList. 因此，onClick={this.onClickList}您可以onClick={event => this.onClickList(event, 1)}为列表视图按钮和onClick={event => this.onClickList(event, 2)}地图视图按钮执行类似操作。

您还可以为每个按钮设置单独的方法。

handleListViewClick = () => setState({ active: 1 })
handleMapViewClick = () => setState({ active: 2 })

您的 onClicks 将类似于

... onClick={handleListViewClick} />
... onClick={handleMapViewClick} />
于 2019-05-14T17:43:03.593 回答
0

在您的Button组件中，您需要绑定this和要active在事件处理程序中设置的值。

要么这样做

onClick={this.onClickList.bind(this, 1)} // for list button
onClick={this.onClickList.bind(this, 2)} // for map button

或者

onClick={(e) => this.onClickList(e, 1)} // for list button
onClick={(e) => this.onClickList(e, 2)} // for map button
于 2019-05-14T17:50:36.950 回答