时间戳

首页 > 解决方案 > 搜索栏产生合成事件

javascript - 搜索栏产生合成事件

问题描述

我有一个应该获取输入值的搜索栏组件，但是我将 useState 用于我的 getter 和 setter，我有点困惑，因为它报告了一个错误在此处输入图像描述

下面是我的组件，你能发现错误吗？

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

标签： javascriptreactjs

解决方案

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

推荐阅读