从Material UI InputBase提取用户输入值失败，求技术解决方案

我来帮你排查这个问题，你的代码里有几个关键的小问题导致获取不到输入值：

问题分析 #

1. InputBase未绑定onChange事件：你给InputBase设置了value={value}，但没有处理输入变化的回调，用户输入的内容根本没同步到value状态里，初始value是undefined，自然一直保持这个值。
2. IconButton的onClick回调参数无效：handleSearch里的newValue参数是没用的，按钮的点击事件只会传入event对象，不会自动传递输入框的值，所以newValue一直是undefined。
3. 调用props.click时用了未更新的value：setValue是异步操作，在调用setValue(newValue)后立刻访问value，拿到的还是更新前的旧值（这里就是初始的undefined）。

修复方案 #

我们一步步修改代码：

1. 给InputBase添加onChange回调：让输入框内容实时同步到state中
2. 修改handleSearch函数：直接使用state中的value，去掉无效的newValue参数
3. 确保props.click拿到最新值：点击按钮时value已经是输入的内容，直接传递即可

修改后的完整代码：

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import IconButton from '@material-ui/core/IconButton'
import InputBase from '@material-ui/core/InputBase'
import Paper from '@material-ui/core/Paper'
import SearchIcon from '@material-ui/icons/Search'

const useStyles = makeStyles(theme => ({}))

export default function CustomizedInputBase(props) {
  // 给state设置初始空字符串，避免undefined
  const [value, setValue] = React.useState('')
  const classes = useStyles()

  const handleSearch = (event) => {
    // 直接使用state里的value，就是用户输入的内容
    console.log(value) 
    // 传递最新的value给父组件的click回调
    props.click(value)
  }

  return (
    <Paper className={classes.root}>
      <InputBase 
        className={classes.input} 
        value={value} 
        placeholder="Szukaj Nazwisk" 
        inputProps={{ 'aria-label': 'search google maps' }}
        // 添加onChange，同步输入值到state
        onChange={(e) => setValue(e.target.value)}
      />
      <IconButton className={classes.iconButton} aria-label="search" onClick={handleSearch}>
        <SearchIcon />
      </IconButton>
    </Paper>
  )
}

额外优化点 #

• 给useState设置初始值为空字符串''，避免初始状态是undefined，输入框初始状态更符合预期。
• 如果需要支持回车键触发搜索，可以给InputBase添加onKeyPress事件：

  onKeyPress={(e) => {
    if (e.key === 'Enter') {
      handleSearch(e)
    }
  }}
  

内容的提问来源于stack exchange，提问作者Szelek