[英]Getting Value from Input Field in React JS
I have made the getting of value from the Input field but my problem is i have to put it to useEffect
since I wanted that only after pressing the onSearch
function that it would search.我已经从 Input 字段中获取了值,但我的问题是我必须将它放到
useEffect
中,因为我希望只有在按下它会搜索的onSearch
之后才能使用它。 Well i can only get the value from the input by using the onChange
function.好吧,我只能通过使用
onChange
function 从输入中获取值。 When I'm still typing it already runs useEffect
.当我还在打字时,它已经运行
useEffect
。 How will get value from params to put it to input field so i refresh the browser it is still there?如何从参数中获取值以将其放入输入字段,以便我刷新浏览器它仍然存在? How will i fix these two issues?
我将如何解决这两个问题?
Pls see my code below:请在下面查看我的代码:
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>
);
}
You don't need useEffect
here.你在这里不需要
useEffect
。
Remove useEffect
and change onSearch
:删除
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.