如何在自动完成的 TextField 中获取设置的选定值 Material UI

Question

我有对象数组

const top100Films = [{ title: 'The Shawshank Redemption', year: 1994 },{ title: 'The Godfather', year: 
1972 },{ title: 'The Godfather: Part II', year: 1974 },{ title: 'The Dark Knight', year: 2008 },{ 
title: '12 Angry Men', year: 1957 }]

我正在使用 Material UI

的自动完成功能

<Autocomplete
                // value={val}
                options={top100Films}
                getOptionLabel={option => option.title}
                style={{ width: 300 }}
                onChange={(event, value) => console.log(value)}
                renderInput={params => (
                    <TextField
                        {...params}
                        label="label"
                        variant="outlined"
                        fullWidth

                    />
                )}
            />

它只是在 TextField 中显示值，但实际上并没有像

那样设置值

<input
        type="text"
        value={props.value}
        onChange={e => props.onChange(e.target.value)}
      />

此输入设置值。

我想在 Autofield 的 TextField 中设置值，而不仅仅是显示它。如何做呢？我已经搜索过，但找不到任何解决方案。

如果有人需要任何进一步的信息，请告诉我。

Answer 1

您的意思是您可以将状态设置为另一个值并实际让自动完成更改它吗？

https://codesandbox.io/s/modest-hertz-zzc19?file=/src/App.js

Material UI doc

Answer 2

所以我想通了...为 TextField 设置值我们可以做的是：

             <Autocomplete
                options={top100Films}
                getOptionLabel={option => option.title}
                style={{ width: 300 }}
                renderInput={params => (
                    <TextField
                        value={props.value}
                        onChange={e => props.onChange(e.target.value)}
                        {...params}
                        label="label"
                        variant="outlined"
                        fullWidth

                    />
                )}
                onChange={e => props.onChange(e.target.innerText)} //This in actual 
                                                                      sets the value
            />

Answer 3

请检查其 documentation 明确提到的地方：

Signature: function(event: object, value: T | T[], reason: string) => void event: The event source of the callback. value: The new value of the component.

这里的第一个参数是 event，second 是值。

因此您可以获得选定的值，例如：

onChange={(event, selectedValue) => handleChange(selectedValue)}  // You can get the `selectedValue` inside your handler function on every time user select some new value

如何在自动完成的 TextField 中获取设置的选定值 Material UI

How to get set selected value inside TextField of AutoComplete Material UI

reactjs

react-hooks

material-table