[英]Getting Value from Input Field in React JS
我已經從 Input 字段中獲取了值,但我的問題是我必須將它放到useEffect
中,因為我希望只有在按下它會搜索的onSearch
之后才能使用它。 好吧,我只能通過使用onChange
function 從輸入中獲取值。 當我還在打字時,它已經運行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()));
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.