mui Input

import { Input } from '@mui/material'

const SearchBox = memo(({inputValue,valueChange}:{inputValue:string,valueChange(value:string):void }) => {
  const myInputChange = (e:React.ChangeEvent<HTMLInputElement>) =>{
    valueChange(e.target.value)
  }
  return (
        <Input 
            placeholder='输入标题关键字进行搜索'
            onChange={myInputChange}
            size='small'
            color='secondary'
            fullWidth
            value={inputValue}
            name='searchBox'
        />
  )
})

antd Input

import { Input } from 'antd'
import { useState } from 'react'

function App() {
  const [inputValue,setInputValue] = useState<string>()
  const valueChange = (e: React.ChangeEvent<HTMLInputElement>)=>{
      setInputValue(e.target.value)
  }
  return (
    <div style={{width:'200px'}}>
     <Input 
      placeholder='input sth to search' 
      size='small' 
      value={inputValue}
      onChange={valueChange}
      />
    </div>
  )
}

export default App