在React JS中从输入字段获取值

Question

我已经完成了从输入字段获取值的工作，但我的问题是我必须把它放到 useEffect 因为我想，只有在按下 onSearch 函数来搜索。好吧，我只能通过使用的 onChange 函数。当我还在打字的时候，它已经运行了 useEffect. 如何从params中获取值，并将其放入输入字段，以便我刷新浏览器，它仍然存在？我将如何解决这两个问题？

请看下面我的代码。

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>
  );
}

Answer 1

你不需要 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()));
};