Материал пользовательского интерфейса - автозаполнение поля по умолчанию? ⇐ Html

[Anonymous]

Я новичок в материале пользовательского интерфейса и не могу видеть, чтобы понять свою голову в отношении поля автозаполнения. Но размещение автозаполнения против TextInput действует странно (для меня). Определяет ли автозаполнение какую -то «коробку» с набором полей, которых нет TextInput? Здесь мне пришлось добавить маржу на текстовый результат, чтобы они выровнялись, но я все еще остался с краем на автозаполнении, который я хочу. Очевидно, что я мог бы добавить стиль для этого, но это приводит к тому, что размер {xs} разбивается при масштабировании. /> < /p>
Что -нибудь, чтобы поставить меня в правильное направление, очень ценится. < /p>
Код следующим образом: < /p>
import React, { useState, useEffect } from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';

export default function AddPurchase() {

const [coinList, setCoinList] = useState([]);
const [name, setName] = useState('');
const [symbol, setSymbol] = useState('');
const [date, setDate] = useState('');
const [price, setPrice] = useState('');
const [amount, setAmount] = useState('');

const data = {
name: name,
symbol: symbol,
date: date,
price: price,
amount: amount
}

const handleName = (e, value) => {
if (value !== null) {
setName(value.substring(0, value.lastIndexOf('-') - 1));
}
else {
setName('')
}

}
const handleSymbol = (e, value) => {
if (value !== null) {
setSymbol(value.substring(value.lastIndexOf('-') + 2));
}
else {
setSymbol('');
}
console.log(value);
}

const handleDate = (e) => {
setDate(e.target.value);
}

const handlePrice = (e) => {
setPrice(e.target.value);
}

const handleAmount = (e) => {
setAmount(e.target.value);
}

const getCoins = useEffect(() => {
let mounted = true;
fetch('http://127.0.0.1:5000/api/v1/coins/list')

.then(res => res.json())
.then(items => {
if (mounted) {
setCoinList(items)
}
})
return () => mounted = false;
}, [])

console.log(data)

return (




(`${item.name} - ${item.symbol.toUpperCase()}`))}
onChange={(e, value) => { handleName(e, value); handleSymbol(e, value) }}
renderInput={(params) => (

)}
/>
















);
}


Подробнее здесь: https://stackoverflow.com/questions/692 ... ult-margin