- 扩展面板中有一个按钮。
- 这样,会有很多扩展面板,每个扩展面板都有一个按钮
- 当我在一个扩展面板中单击一个按钮时。我需要禁用其他按钮。
- 所以我想我将使用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>
);
}
}