无法将输入值清除为空字符串

Question

我制作了一个带有搜索栏功能的表格，它在按下搜索按钮时过滤数据并重置过滤功能并在单击清除按钮时显示未过滤的数据，但它不会从展示。但是它会清除 filetr 函数并显示未过滤的数据。我厌倦了将状态设置为空字符串但仍然无法清除输入值，我是反应新手，需要帮助来理解问题

1. App.js 有搜索栏和所有的状态和功能

    function App() {

  const [searchTerm, setSearchTerm] = useState("");
  const classes = useStyles();
  const [buttonSearch, setButtonSearch] = useState("");
  const getSearchTerm = (event) => {

    let searchWord = event.target.value;

    setSearchTerm(searchWord);

    console.log(searchWord);


  }

  const doSearch = () => {

    console.log('this is from the doSearch func', searchTerm)
    setButtonSearch(searchTerm);
  }

  const clearSearch = () => {
    console.log('im working')
    setSearchTerm("");
    setButtonSearch("");

  }

  return (
    <div className="App">
      <div className="wrapper">
        <div className="container-table">
          <div className="head">
            <h5 className='management'>MANAGEMENT</h5>
            <div className="head-middle">
              <h2>Clients</h2>
              <div className="button-collection">
                <Button style={{ backgroundColor: '#5900B4', color: '#FFFFFF', fontSize: '15px', fontWeight: '900', width: '206px', height: '42px' }}
                  variant="contained"
                  className='add-collection-btn'
                  startIcon={<AddIcon />}
                >
                  New Collection
                </Button>
              </div>
            </div>
            <div className="head-bottom">
              <div className="head-button">

                <div className="search">
                  <div className={classes.search}>
                    <div className={classes.searchIcon}>
                      <SearchIcon />
                    </div>
                    <InputBase
                      placeholder="Search..."
                      classes={{
                        root: classes.inputRoot,
                        input: classes.inputInput,
                      }}

                      onChange={getSearchTerm}

                    />
                  </div>
                </div>
                <Button onClick={doSearch}
                  style={{ backgroundColor: 'white', color: 'black', width: '100px', height: '40px', marginLeft: '20px', marginRight: '20px' }} variant="contained">
                  Search
                </Button>
                <Button onClick={clearSearch}
                  style={{ backgroundColor: 'white', color: 'black', width: '100px', height: '40px' }} variant="contained">
                  Clear
                </Button>
              </div>

              <Button
                style={{ backgroundColor: 'transparent', color: '#5900B4', width: '206px', height: '42px', borderColor: '#5900B4', fontSize: '15px', fontWeight: '900' }}
                variant="outlined" color="primary"
                startIcon={<FilterListIcon />}
              >
                SHOW FILTER
              </Button>
            </div>
            <div className="table">
              <EnhancedTable
                searchTerm={buttonSearch}

              />
            </div>

          </div>
        </div>

      </div>
    </div>
  );
}

2。 table.js 具有过滤和映射功能

export default function EnhancedTable(props) {

console.log("these r props for table component", props);

const { searchTerm } = props;


console.log("table searchTerm value", searchTerm)

const classes = useStyles();
const [order, setOrder] = React.useState('asc');
const [orderBy, setOrderBy] = React.useState('calories');
const [selected, setSelected] = React.useState([]);
const [page, setPage] = React.useState(0);
const [dense, setDense] = React.useState(false);
const [rowsPerPage, setRowsPerPage] = React.useState(5);


const isSelected = (name) => selected.indexOf(name) !== -1;

const [data, setData] = useState([]);

const getData = async () => {
    try {
        const data = await axios.get("something");
        console.log('This is data from axios', data.data);
        setData(data.data);
    } catch (e) {
        console.log("this is error for fetching data", e)
    }
};


useEffect(() => {
    getData();
}, [])

const filtered = useMemo(() => {
    if (!searchTerm) {
        return data;
    }
    const term = searchTerm.toLowerCase()

    return data.filter(({ clientName, clientEmail }) => clientName.toLowerCase().includes(term)
        || clientEmail.toLowerCase().includes(term)
    )

}, [data, searchTerm])

return (
    <div className={classes.root}>

        <Paper className={classes.paper}>
            <EnhancedTableToolbar numSelected={selected.length} />
            <TableContainer>
                <Table
                    className={classes.table}
                    aria-labelledby="tableTitle"
                    size={dense ? 'small' : 'medium'}
                    aria-label="enhanced table"
                >
                    <EnhancedTableHead
                        classes={classes}
                        numSelected={selected.length}
                        order={order}
                        orderBy={orderBy}
                    />
                    <TableBody>
                        {filtered
                            .map((item, index) => {
                                return (

                                    <TableRow
                                        hover
                                        role="checkbox"
                                        tabIndex={-1}
                                    >
                                        <TableCell padding="checkbox">
                                            <Checkbox
                                            />
                                        </TableCell>
                                        <TableCell component="th" scope="row" padding="none">{item.clientName}</TableCell>
                                        <TableCell align="right">{item.clientEmail}</TableCell>
                                        <TableCell align="right">{item.clientWorkPhone}</TableCell>
                                        <TableCell align="right">{item.clientIndustry}</TableCell>
                                        <TableCell align="right">{item.tenantId}</TableCell>
                                        <TableCell align="right">{item.clientWebsite}</TableCell>
                                        <TableCell align="right">
                                            <Button style={{ backgroundColor: 'transparent', color: '#5900B4' }}
                                                variant="outlined" color="primary" href="#outlined-buttons" >
                                                {<CreateIcon />}
                                            </Button>
                                        </TableCell>
                                    </TableRow>
                                )
                            })}

                    </TableBody>
                </Table>
            </TableContainer>

        </Paper>

    </div>
);

}

Answer 1

试试这个选项