作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经从输入字段中获取了值(value),但我的问题是我必须把它放到 useEffect
因为我只在按下 onSearch
后才想要那个它会搜索的功能。好吧,我只能使用 onChange
从输入中获取值功能。当我还在打字时,它已经运行 useEffect
.如何从参数中获取值以将其放入输入字段,以便我刷新浏览器它仍然存在?我将如何解决这两个问题?
请在下面查看我的代码:
export default function Students() {
const classes = useStyles();
const dispatch = useDispatch();
const students = useSelector((state) => state.student.students);
const isLoading = useSelector((state) => state.student.isLoading);
const totalPages = useSelector((state) => state.student.totalPages);
const currentPage = useSelector((state) => state.student.currentPage);
const itemsPerPage = useSelector((state) => state.student.itemsPerPage);
const previous = useSelector((state) => state.student.previous);
const next = useSelector((state) => state.student.next);
const history = useHistory();
const location = useLocation();
const { search } = location;
const params = new URLSearchParams(search);
const page = params.has('page') ? parseInt(params.get('page')) : 1;
const rowsPerPage = params.has('rowsPerPage') ? parseInt(params.get('rowsPerPage')) : 10;
const [searchValue, setSearchValue] = React.useState('');
const handleChangePage = (event, newPage) => {
params.set('page', newPage + 1);
history.push('/students?' + params.toString());
};
const handleChangeRowsPerPage = (event) => {
params.delete('page');
params.set('rowsPerPage', +event.target.value);
history.push('/students?' + params.toString());
};
const onChange = (event) => {
setSearchValue(event.target.value);
};
const onSearch = () => {
params.delete('page');
params.delete('rowsPerPage');
params.set('key', searchValue.toString());
history.push('/students?key=' + searchValue.toString());
dispatch(getStudents(10, 1, searchValue.toString()));
};
useEffect(() => {
dispatch(getStudents(rowsPerPage, page, ''));
}, [page, rowsPerPage, dispatch]);
return (
<div>
<div className={classes.title}>
<h2>Students</h2>
</div>
<div className={classes.header}>
<Paper component="form" className={classes.searchBarSection}>
<InputBase
className={classes.input}
placeholder="Search..."
inputProps={{ 'aria-label': 'search...' }}
onChange={onChange}
/>
<IconButton type="button" className={classes.iconButton} aria-label="search" onClick={onSearch}>
<SearchIcon />
</IconButton>
</Paper>
</div>
{isLoading ? (
<div style={{ display: 'flex', justifyContent: 'center' }}>
<CircularProgress />
</div>
) : students && students.length > 0 ? (
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
<TableCell>First Name</TableCell>
<TableCell>Last Name</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{students.map((patient, index) => (
<TableRow key={index}>
<TableCell>{patient.FirstName}</TableCell>
<TableCell>{patient.LastName}</TableCell>>
<TableCell>
<Button variant="contained" size="small" color="primary" startIcon={<VisibilityIcon />}>
View
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 25, 100]}
component="div"
count={totalPages}
rowsPerPage={itemsPerPage}
page={currentPage - 1}
backIconButtonProps={{
disabled: previous === null,
}}
nextIconButtonProps={{
disabled: next === null,
}}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
) : (
<Typography variant="body2">No Students Available...</Typography>
)}
</div>
);
}
最佳答案
你不需要useEffect
这里。
删除 useEffect
并更改 onSearch
:
const onSearch = () => {
params.delete('page');
params.delete('rowsPerPage');
params.set('key', searchValue.toString());
history.push('/students?key=' + searchValue.toString());
dispatch(getStudents(rowsPerPage, page, searchValue.toString()));
};
关于javascript - 从 React JS 中的输入字段获取值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62300402/
我是一名优秀的程序员,十分优秀!