选择一个按钮后做出反应,禁用其他按钮

时间:2019-06-12 20:24:32

标签: javascript html css reactjs redux

  • 扩展面板中有一个按钮。
  • 这样,会有很多扩展面板,每个扩展面板都有一个按钮
  • 当我在一个扩展面板中单击一个按钮时。我需要禁用其他按钮。
  • 所以我想我将使用e.target.id
  • 定位每个按钮
  • 但是当我尝试打印它的打印像这样时 sportsSelected e---> Proxy {dispatchConfig: {…}, _targetInst: FiberNode, isDefaultPrevented: ƒ, isPropagationStopped: ƒ, _dispatchListeners: ƒ, …} [[Handler]]: Object [[Target]]: Class [[IsRevoked]]: false
  • 你能告诉我如何解决它吗?
  • 在下面提供我的代码段
class sportsData extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showIncludeSelected: true,

            showIncludeSelectedButtons: true
        }

    }

      sportsSelected = (e) => {
        this.setState({ showIncludeSelected: false });
        console.log("sportsSelected e--->", e);
    }




    render() {
        const { totalCount, initialIndex, finalIndex } = this.state;
        const { resultSet, radioValues } = this.props;
        const { canEdit, value } = this.state;
        const { checkBoxvalues } = this.state;


        // console.log("csr resultSet.jumpNumbers--->", resultSet.jumpNumbers);

        const WithState = toRenderProps(
            withState('anchorEl', 'updateAnchorEl', null)
        );
        let dots = '..';
        let matchedjumpNumber;
        let defaultjumpNumber;
        let matchedrunr;
        let jumpInactive;
        let matchedLicenseNumber;
        let runrExpired = false;
        let jumpNumberExpired = false;

        let displayName = resultSet.displayName;
        let originalName = resultSet.displayName
        if (displayName.length > 50) {
            displayName = displayName.substring(0, 50) + dots;
        }

        const { typeAhead, typeAheadMode, classes, handleSubmit, uploadLOAs, enableEdit,
            type,
            onChangeCheckbox,
            // checks,
            fieldTypeRadio } = this.props;
        return (

            <div>

                <MuiThemeplayer theme={theme2}>

                    <ExpansionPanel>
                        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}
                        >
                            <Typography style={{ width: '100%' }} //className={classes.heading}
                            >
                                {' '}
                                <div className={styles.row} key={resultSet.playerId}

                                >

                                    <div className={styles.col30}><a
                                        title={originalName}> {displayName ? this.handleplayerName(displayName, typeAhead, resultSet) : ''} </a>
                                    </div>
                                    <div className={styles.col}>{resultSet.category}</div>
                                    <div
                                        className={runrExpired ? dataStyles.dataInactive : styles.col}>{matchedrunr ? matchedrunr.number : null}</div>
                                    <div
                                        className={styles.col10}>{DataFormat.maskweruiuiw(resultSet.weruiuiwType, resultSet.formattedweruiuiw)}</div>
                                    <div
                                        className={jumpNumberExpired ? (dataStyles.dataInactive + ' ' + dataStyles.jump) : styles.col10}>
                                        {matchedjumpNumber ? matchedjumpNumber.number : null}
                                        {(resultSet.jumpNumbers && resultSet.jumpNumbers.length > 1) ?
                                            <FA name="plus" className={dataStyles.additionalMessage} /> : ""}

                                        {/*{resultSet.jumpNumbers}*/}
                                    </div>
                                    {/*<div className={styles.col10}>{resultSet.playerId}</div>*/}
                                    {/*<div className={styles.col10}>{matchedLicenseNumber ? matchedLicenseNumber.number : null}</div>*/}
                                </div>
                            </Typography>
                        </ExpansionPanelSummary>
                        <ExpansionPanelDetails>
                            <Typography>

                                <div className={classes.root}>


                                    {this.renderExpansionPanel()}


                                    <div style={{ borderTop: '1px solid black' }} >
                                        <Button
                                            variant="outlined"
                                            color="primary"
                                            size="small"
                                            style={{
                                                display: this.state.showIncludeSelected ? '' : 'none',
                                                color: '#009688', border: '1px solid #009688',
                                                marginLeft: 740, marginTop: 8


                                            }}


                                            onClick={this.sportsSelected}
                                            className={classes.button}
                                        >

                                            Include Selected
                                        </Button>
                                        <Button
                                            variant="outlined"
                                            color="#009688"
                                            size="small"
                                            style={{
                                                display: !this.state.showIncludeSelected ? '' : 'none',
                                                color: '#009688',
                                                border: '1px solid #009688',
                                                marginLeft: 740, marginTop: 8


                                            }}
                                            onClick={this.removeSelected}

                                        >



                                            remove Selected
                                        </Button>
                                    </div>

                                </div>





                            </Typography>
                        </ExpansionPanelDetails>
                    </ExpansionPanel>
                </MuiThemeplayer>
            </div>
        );
    }

}

0 个答案:

没有答案