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

Question

我在 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>
);

Answer 1

您必须在功能组件中使用 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>
)} ;

Answer 2

功能组件中的道具只是参数！

function SearchBar (props) {
  let searchbartext = document.getElementById('searchbartext')
  searchbartext.addEventListener('change', (e) => {
    props.onChange(e)
  }
  return ( 
    <form onsubmit={(e) => props.onRequestChange(e)}>
      <input id="searchbartext" style={props.style} />
    </form>
  )
}

const UserSearchPage = () => {
  function onRequestSearch (e) {
    console.log.('request search', e)
  }
  function onChange(e) {
    console.log('onChange')
  }
  return (
  {SearchBar({
        onChange:onChange,
        onRequestSearch:onRequestSearch,
        style:{
          margin: '0 auto',
          maxWidth: 800
        }
     })}
  )
}

编辑：您还必须将功能组件调用为函数，而不是像类组件那样使用<> 语法。我在 SearchBar(props) 中使用了术语“props”，但它只是遵循 Reacts 命名约定。您可以轻松地将其替换为 SearchBar(bananas)。