时间戳

首页 > 解决方案 > 使用没有类组件的构造函数（道具）

javascript - 使用没有类组件的构造函数（道具）

问题描述

我在 TypeScript 中创建了一个搜索栏，但现在我无法在其中输入任何内容。我看到的所有控制组件教程都建议使用构造函数（props）左右。如果我在我的代码中使用它，我会得到错误。

有没有办法在没有类组件的情况下使用它？

例如，我正在为我的页面使用 const()。有什么办法可以使这个搜索栏起作用吗？

const userSearchPage = () => (
  <div>
    <PermanentDrawerLeft></PermanentDrawerLeft>
    <div className='main-content'>
      <MuiThemeProvider>
        <DropDownMenu >
          <MenuItem style={{ fontSize: "20px" }} primaryText="Search By" />
          <MenuItem value={1} style={{ fontSize: "20px" }} primaryText="First Name" />
          <MenuItem value={1} style={{ fontSize: "20px" }} primaryText="Last Name" />
        </DropDownMenu>
      </MuiThemeProvider>
   <SearchBar
        onChange={() => console.log('onChange')}
        onRequestSearch={() => console.log('onRequestSearch')}
        style={{
          margin: '0 auto',
          maxWidth: 800
        }}
     />
    </div>
  </div>
);

标签： javascripthtmlreactjstypescriptsearchbar

解决方案

您必须在功能组件中使用 useState 挂钩。

const userSearchPage = () => {
const [value, setValue] = React.useState('');
return (
  <div>
    <PermanentDrawerLeft></PermanentDrawerLeft>
    <div className='main-content'>
      <MuiThemeProvider>
        <DropDownMenu >
          <MenuItem style={{ fontSize: "20px" }} primaryText="Search By" />
          <MenuItem value={1} style={{ fontSize: "20px" }} primaryText="First Name" />
          <MenuItem value={1} style={{ fontSize: "20px" }} primaryText="Last Name" />
        </DropDownMenu>
      </MuiThemeProvider>
      <SearchBar
        onChange={(value) => setValue(value) }
        value={value} 
        onRequestSearch={() => console.log('onRequestSearch')}
        style={{
          margin: '0 auto',
          maxWidth: 800
        }}
      />
    </div>
  </div>
)} ;

推荐阅读