自动完成反应材料用户界面变化

Question

我有一个工作方式如下：

每次用户在表单输入字段中键入字符时，onChange属性都会调用handleChange处理函数，将事件对象作为隐式参数传递。事件对象包括具有字段名称和值属性的目标。handleChange函数依次调用setLocation，该函数用新值更新商品状态。

添加材料ui的自动完成功能并显示城市，但是在其他两个字段中添加信息会删除城市字段中的信息。

在将自动完成功能添加到城市字段之前，添加位置的表格效果很好，现在，如果我单击添加，它不会标记任何错误，但是位置也不会添加

可能是什么问题？

import React, { useState, useEffect} from "react"; 
import  axios  from 'axios';
import TextField from '@material-ui/core/TextField';
import {  Typography,Button} from '@material-ui/core';
import Autocomplete from '@material-ui/lab/Autocomplete'
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
    option: {
      fontSize: 15,
      '& > span': {
        marginRight: 10,
        fontSize: 18,
      },
    },
  }));

function LocationAdd(props) {

  const classes = useStyles();

  const[list, setList]=useState({Data:[]});

useEffect(()=>{
  const getList=async()=>{
          const response =await axios.get('/apirest/ListCity');
          setList(response.data);
  }
  getList();
},[]);

  const initialState = { City: '', State: '', Zip_code:0 }

  const [location, setLocation] = useState(initialState) 

  function handleChange(event) { 
    setLocation({...location, [event.target.name]: event.target.value})
  }

  function handleSubmit(event) { 
    event.preventDefault();  

    if(!location.City || !location.State || !location.Zip_code) return 
    async function postLocation() {
      try {
        const response = await axios.post('/apirest/addLocation', location); 
        props.history.push(`/location/${response.data._id}`);  
      } catch(error) {
        console.log('error', error);
      }
    }
    postLocation();
  }

  function handleCancel() {
    props.history.push("/location");
  }

  return ( 
    <div style={{ padding: 16, margin: 'auto', maxWidth: 1000 }}> 
    <Typography variant="h4" align="center" component="h1" gutterBottom>
    Add
  </Typography>
    <form onSubmit={handleSubmit}>

    <Autocomplete
    style={{ width: 300 }}
    value={location.City}
    onChange={handleChange}
    options={list.City}
    classes={{
      option: classes.option,
    }}
    autoHighlight
    getOptionLabel={option => typeof option === 'string' ? option : option.City}
    renderOption={option => (
      <React.Fragment>

        {option.City} -{option.State}
      </React.Fragment>
    )}

     renderInput={params => (
       <TextField {...params} label="City"  value={location.City}  margin="normal" variant="outlined" style={{ width: 220 }} inputProps={{
         ...params.inputProps,
         autoComplete: 'disabled', // disable autocomplete and autofill
       }}/>
     )}
   />

      <TextField
        name="State"
        label="State"
        value={location.State}
        onChange={handleChange}
        margin="normal"
        variant="outlined"
      />
      <TextField
        name="Zip_code"
        label="Zip_code"
        value={location.Zip_code}
        onChange={handleChange}
        margin="normal"
        variant="outlined"
      />

        <Button
            variant="contained"
            color="primary"
            type="submit">
                  Add
        </Button>

        <Button
            onClick={handleCancel}
            variant="contained"
            type="cancel">
                  Cancel
        </Button>

    </form>
    </div>
  );
}

export default LocationAdd

Answer 1

您忘记为自动完成功能添加name属性：

<TextField {...params} label="City" value={location.City} margin="normal" variant="outlined" style={{ width: 220 }} inputProps={{ ...params.inputProps, autoComplete: 'disabled',
name: "City" // add this
 }}/>

如果不起作用，请尝试将其添加到文本字段或自动完成本身（name="City"）

Answer 2

您忘记为自动完成功能添加name属性：

<TextField {...params} label="City" value={location.City} margin="normal" variant="outlined" style={{ width: 220 }} inputProps={{ ...params.inputProps, autoComplete: 'disabled',
name: "City" // add this
 }}/>

如果不起作用，请尝试将其添加到文本字段或自动完成本身（name="City"）