Question

我有一个带有两个按钮的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);

Answer 1

您需要将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} />

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

Onclicking按钮更改被单击按钮和另一个按钮的className。 ReactJs

2 个答案: