javascript - 类如何在反应中调用其他类函数？
问题描述
我是反应和 javascript 的新手。我可以知道如何从当前类调用其他类函数吗？
我只能使用 prop 在类之间传递数据。
例如，我有一个工具栏和一个用户类。当我单击工具栏删除按钮时。我想在我的用户类中调用删除函数。如何做到这一点？
所以这是我的工具栏。当我单击删除按钮时，我想在我的用户类中触发 deleteUser。
let EnhancedTableToolbar = props => {
const { numSelected, classes, selectedArray } = props;
return (
<Toolbar
className={classNames(classes.root, {
[classes.highlight]: numSelected > 0,
})}
>
<div className={classes.title}>
{numSelected > 0 ? (
<Typography color="inherit" variant="subtitle1">
{numSelected} selected
</Typography>
) : (
<Typography variant="h6" id="tableTitle">
User List
</Typography>
)}
</div>
<div className={classes.spacer} />
<div className={classes.actions}>
{numSelected > 0 ? (
<Tooltip title="Delete">
<IconButton aria-label="Delete">
<DeleteIcon onClick={() => { if (window.confirm('Are you sure you wish to delete '+numSelected +' item?')) deleteUser() } }>
</DeleteIcon>
</IconButton>
</Tooltip>
) : (
<Tooltip title="Filter list">
<IconButton aria-label="Filter list">
<FilterListIcon />
</IconButton>
</Tooltip>
)}
</div>
</Toolbar>
);
};
EnhancedTableToolbar.propTypes = {
classes: PropTypes.object.isRequired,
numSelected: PropTypes.number.isRequired,
selectedArray: PropTypes.array.isRequired,
};
EnhancedTableToolbar = withStyles(toolbarStyles)(EnhancedTableToolbar);
这是我的用户类。该类中使用了工具栏。我希望在单击工具栏删除按钮时触发 deleteUser()。
class User extends React.Component {
constructor(props) {
super(props);
this.state = initialState;
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
reset() {
this.setState(initialState);
}
componentDidMount() {
axios.get("http://localhost:4000/readUsers")
.then(json => {
this.setState({data: json.data});
console.log({json})
}).catch(err => console.log("error: "+err));
}
deleteUser(){
}
displayUsers(){
const { classes } = this.props;
const { data, order, orderBy, selected, rowsPerPage, page } = this.state;
const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
console.log("selected length: "+selected.length+" selected: "+selected);
return(
<Paper className={classes.root}>
<EnhancedTableToolbar numSelected={selected.length} selectedArray={selected} />
<div className={classes.tableWrapper}>
<Table className={classes.table} aria-labelledby="tableTitle">
<EnhancedTableHead
numSelected={selected.length}
order={order}
orderBy={orderBy}
onSelectAllClick={this.handleSelectAllClick}
onRequestSort={this.handleRequestSort}
rowCount={data.length}
/>
<TableBody>
{stableSort(data, getSorting(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map(n => {
const isSelected = this.isSelected(n.id);
return (
<TableRow
hover
onClick={event => this.handleClick(event, n.id)}
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={n.id}
selected={isSelected}
>
<TableCell padding="checkbox">
<Checkbox checked={isSelected} />
</TableCell>
<TableCell component="th" scope="row" padding="none">
{n.id}
</TableCell>
<TableCell align="right">{n.name}</TableCell>
<TableCell align="right">{n.username}</TableCell>
<TableCell align="right">{n.email}</TableCell>
<TableCell align="right">{n.address}</TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: 49 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</div>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={data.length}
rowsPerPage={rowsPerPage}
page={page}
backIconButtonProps={{
'aria-label': 'Previous Page',
}}
nextIconButtonProps={{
'aria-label': 'Next Page',
}}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
/>
</Paper>
);
}
handleRequestSort = (event, property) => {
const orderBy = property;
let order = 'desc';
if (this.state.orderBy === property && this.state.order === 'desc') {
order = 'asc';
}
this.setState({ order, orderBy });
};
handleSelectAllClick = event => {
if (event.target.checked) {
this.setState(state => ({ selected: state.data.map(n => n.id) }));
return;
}
this.setState({ selected: [] });
};
handleClick = (event, id) => {
const { selected } = this.state;
const selectedIndex = selected.indexOf(id);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, id);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(
selected.slice(0, selectedIndex),
selected.slice(selectedIndex + 1),
);
}
this.setState({ selected: newSelected });
};
handleChangePage = (event, page) => {
this.setState({ page });
};
handleChangeRowsPerPage = event => {
this.setState({ rowsPerPage: event.target.value });
};
isSelected = id => this.state.selected.indexOf(id) !== -1;
render() {
const { classes } = this.props;
return (
<GridContainer>
<GridItem xs={12} sm={12} md={12}>
{this.checkCurrentButton()}
<Card>
<CardHeader color="primary">
<h4 className={classes.cardTitleWhite}>User List</h4>
<p className={classes.cardCategoryWhite}>
{}
</p>
</CardHeader>
<CardBody>
{this.displayUser()}
</CardBody>
<CardFooter>
</CardFooter>
</Card>
</GridItem>
</GridContainer>
);
}
}
User.propTypes = {
classes: PropTypes.object.isRequired,
};
解决方案
您可以将函数作为道具从父类传递给工具栏，然后像使用 this.props.deleteUser() 一样访问它，如下所示：
let EnhancedTableToolbar = props => {
const { numSelected, classes, selectedArray } = props;
return (
<Toolbar
className={classNames(classes.root, {
[classes.highlight]: numSelected > 0,
})}
>
<div className={classes.title}>
{numSelected > 0 ? (
<Typography color="inherit" variant="subtitle1">
{numSelected} selected
</Typography>
) : (
<Typography variant="h6" id="tableTitle">
User List
</Typography>
)}
</div>
<div className={classes.spacer} />
<div className={classes.actions}>
{numSelected > 0 ? (
<Tooltip title="Delete">
<IconButton aria-label="Delete">
<DeleteIcon onClick={() => { if (window.confirm('Are you sure you wish to delete '+numSelected +' item?')) this.props.deleteUser() } }>
</DeleteIcon>
</IconButton>
</Tooltip>
) : (
<Tooltip title="Filter list">
<IconButton aria-label="Filter list">
<FilterListIcon />
</IconButton>
</Tooltip>
)}
</div>
</Toolbar>
);
};
EnhancedTableToolbar.propTypes = {
classes: PropTypes.object.isRequired,
numSelected: PropTypes.number.isRequired,
selectedArray: PropTypes.array.isRequired,
};
EnhancedTableToolbar = withStyles(toolbarStyles)(EnhancedTableToolbar);
和你的用户类：
class User extends React.Component {
constructor(props) {
super(props);
this.state = initialState;
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
reset() {
this.setState(initialState);
}
componentDidMount() {
axios.get("http://localhost:4000/readUsers")
.then(json => {
this.setState({data: json.data});
console.log({json})
}).catch(err => console.log("error: "+err));
}
deleteUser(){
}
displayUsers(){
const { classes } = this.props;
const { data, order, orderBy, selected, rowsPerPage, page } = this.state;
const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
console.log("selected length: "+selected.length+" selected: "+selected);
return(
<Paper className={classes.root}>
<EnhancedTableToolbar deleteUser={this.deleteUser} numSelected={selected.length} selectedArray={selected} />
<div className={classes.tableWrapper}>
<Table className={classes.table} aria-labelledby="tableTitle">
<EnhancedTableHead
numSelected={selected.length}
order={order}
orderBy={orderBy}
onSelectAllClick={this.handleSelectAllClick}
onRequestSort={this.handleRequestSort}
rowCount={data.length}
/>
<TableBody>
{stableSort(data, getSorting(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map(n => {
const isSelected = this.isSelected(n.id);
return (
<TableRow
hover
onClick={event => this.handleClick(event, n.id)}
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={n.id}
selected={isSelected}
>
<TableCell padding="checkbox">
<Checkbox checked={isSelected} />
</TableCell>
<TableCell component="th" scope="row" padding="none">
{n.id}
</TableCell>
<TableCell align="right">{n.name}</TableCell>
<TableCell align="right">{n.username}</TableCell>
<TableCell align="right">{n.email}</TableCell>
<TableCell align="right">{n.address}</TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: 49 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</div>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={data.length}
rowsPerPage={rowsPerPage}
page={page}
backIconButtonProps={{
'aria-label': 'Previous Page',
}}
nextIconButtonProps={{
'aria-label': 'Next Page',
}}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
/>
</Paper>
);
}
handleRequestSort = (event, property) => {
const orderBy = property;
let order = 'desc';
if (this.state.orderBy === property && this.state.order === 'desc') {
order = 'asc';
}
this.setState({ order, orderBy });
};
handleSelectAllClick = event => {
if (event.target.checked) {
this.setState(state => ({ selected: state.data.map(n => n.id) }));
return;
}
this.setState({ selected: [] });
};
handleClick = (event, id) => {
const { selected } = this.state;
const selectedIndex = selected.indexOf(id);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, id);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(
selected.slice(0, selectedIndex),
selected.slice(selectedIndex + 1),
);
}
this.setState({ selected: newSelected });
};
handleChangePage = (event, page) => {
this.setState({ page });
};
handleChangeRowsPerPage = event => {
this.setState({ rowsPerPage: event.target.value });
};
isSelected = id => this.state.selected.indexOf(id) !== -1;
render() {
const { classes } = this.props;
return (
<GridContainer>
<GridItem xs={12} sm={12} md={12}>
{this.checkCurrentButton()}
<Card>
<CardHeader color="primary">
<h4 className={classes.cardTitleWhite}>User List</h4>
<p className={classes.cardCategoryWhite}>
{}
</p>
</CardHeader>
<CardBody>
{this.displayUser()}
</CardBody>
<CardFooter>
</CardFooter>
</Card>
</GridItem>
</GridContainer>
);
}
}
User.propTypes = {
classes: PropTypes.object.isRequired,
};
推荐阅读
- android - 部分屏幕上的 admob 智能横幅
- oracle - ORA-06502: PL/SQL: 在空游标的情况下出现数字或值错误
- node.js - 将标头发送到客户端（Nodejs、MongoDb、Express）后无法设置标头
- ansible - git remote set-url origin 的 Ansible 等价物
- python - 我的模型的验证准确性卡住了！我如何解决它？[张量流/Keras]
- r - 在 R 中显示 ggplot 中所有 bin 的 x 刻度值
- xcode - 如何修复 Xcode+ 助手布局中没有助手的结果是水平的而不是垂直的
- c++ - 为什么我的 VS 代码编辑器没有运行我的代码？
- java - 禁用 Dart 和 Kotlin 插件后 Android Studio 未运行
- c++ - 如何使用 Voro++ 库获取容器中所有相邻粒子的位置？