ReactJS Material UI inputbase 输入提取 - 未定义

Question

尝试从 Material UI inputbase 组件中提取用户输入文本

我确定我做错了什么，但我不知道是什么。

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) {
  const [value, setValue] = React.useState()
  const classes = useStyles()

  const handleSearch = (event, newValue) => {
    setValue(newValue)
    props.click(value)
    console.log(newValue) // return undefined
    console.log(value)    // return undefined
  }

  return (
    <Paper className={classes.root}>
      <InputBase
        className={classes.input}
        value={value}
        placeholder="Szukaj Nazwisk"
        inputProps={{ 'aria-label': 'search google maps' }}
      />
      <IconButton className={classes.iconButton} aria-label="search" onClick={handleSearch}>
        <SearchIcon />
      </IconButton>
    </Paper>
  )
}

有什么想法吗？

Answer 1

请看最终解决方案代码：

export default function CustomizedInputBase(props) {
  const [value, setValue] = React.useState()
  const classes = useStyles()

  const handleSearch = (event) => { // changed the "handleSearch()" function
    props.click(value)
  }

  return (
    <Paper className={classes.root}>
      <InputBase
        className={classes.input}    //delete the 'value={value}'
        placeholder="Szukaj Nazwisk"
        inputProps={{ 'aria-label': 'search google maps' }}
        onChange={event=>{                                 //adding the onChange event
          setValue(event.target.value)
        }}
      />
      <IconButton className={classes.iconButton} aria-label="search" onClick={handleSearch}>
        <SearchIcon />
      </IconButton>
    </Paper>
  )
}

需要删除“value = {value}”否则你会收到控制台警告：

index.js:1375 Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: fb.me/react-controlled-components

它可能对某人有用:)

Answer 2

你应该像这样为 undefined 例外。

    import React from 'react';
    import PropTypes from 'prop-types';
    import Paper from '@material-ui/core/Paper';
    import InputBase from '@material-ui/core/InputBase';
    import IconButton from '@material-ui/core/IconButton';
    import SearchIcon from '@material-ui/icons/Search';
    import makeStyles from '@material-ui/core/styles/makeStyles';

    const useStyles = makeStyles((theme) => ({
      root: {
        display: 'flex',
        alignItems: 'center',
        borderRadius: 30,
        width: 250,
        height: 40,
      },
      input: {
        marginLeft: theme.spacing(1),
        flex: 1,
      },
      inputField: {
        paddingLeft: theme.spacing(2),
        fontSize: 14,
      },
      iconButton: {
        padding: theme.spacing(1),
        marginLeft: theme.spacing(0.5),
        background: theme.palette.base[200],
        '& svg': {
          fill: theme.palette.base.white,
        },
      },
    }));

    function CustomSearchInput(props) {
      const classes = useStyles();
      const { disabled } = props;

      const onChange = (event) => {
        console.log(event.target.value);
      };

      return (
        <Paper className={classes.root}>
          <InputBase
            className={classes.input}
            placeholder="ID No."
            inputProps={{ 'aria-label': 'id no.', className: classes.inputField }}
            disabled={disabled}
            onChange={onChange}
          />
          <IconButton className={classes.iconButton} aria-label="search">
            <SearchIcon />
          </IconButton>
        </Paper>
      );
    }