单击按钮更改单击按钮和另一个按钮的类名 | ReactJs

Question

我有一个带有两个按钮的 React 组件。当用户单击左键时，它应该更改左键的 class 以及右键的 class 并且它还会渲染 ListView 组件。同样，当用户单击右键时，它应该更改右键的 class 以及左键的 class 并且它还会渲染 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);

Answer 1

您需要将 active 传递给 this.onClickList。因此，您可以为列表视图按钮做 onClick={event => this.onClickList(event, 1)} 而不是 onClick={this.onClickList}，为地图视图按钮做 onClick={event => this.onClickList(event, 2)}。

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

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

你的 onClicks 会是这样的

... onClick={handleListViewClick} />
... onClick={handleMapViewClick} />

Answer 2

在您的 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

单击按钮更改单击按钮和另一个按钮的类名 | ReactJs

Onclicking button change className of the clicked Button and another Button | ReactJs

javascript

reactjs

react-material