Question

我有一个搜索栏组件，该组件应采用输入值，但是我将useState用于我的getter和setter，并且由于报告错误

而感到困惑

下面是我的组件，你能看到erorr吗？

const SuppliersNavBar = (props) => {

const { classes } = props;
const [search, setSearch] = useState();

const updateSearch = (event) => {
setSearch({ search: event.target.value });
console.log(event);
};

return (
<Fragment><Fab className={classes.addCircle} style={{ float: 'right', 
marginRight: 10, marginBottom: 10, backgroundColor: '#3B70BC', color: 
'white' }} onClick={() => { this.props.history.push('/'); }} 
id="addCircle" ><Add /></Fab>
  <div className={classes.root}>
    <AppBar position="static">
      <Toolbar>
        <Grid container direction="row"
          justify="flex-start"
          alignItems="center">
          <Grid item xs={12} sm={6} md={3}>
            <div className={classes.grow} />
            <div className={classes.search} aria-label="search bar">
              <div className={classes.searchIcon}>
                <Search id="searchIcon" />
              </div>
              <InputBase
                aria-label="search bar"
                value={search}
                onChange={updateSearch.bind(this)}
                placeholder="Search"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
              />
            </div>
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>
  </div>
</Fragment>
);
};

Answer 1

react中的事件通过对象池进行处理，这意味着无法通过控制台读取事件。您可以致电event.persist()，就能看到它。请查看此页面以获取更多信息。 https://reactjs.org/docs/events.html

搜索栏产生综合事件

1 个答案: