如何在 AutoComplete Material UI 的 TextField 中设置选定值答案

【问题标题】：How to get set selected value inside TextField of AutoComplete Material UI如何在 AutoComplete Material UI 的 TextField 中设置选定值
【发布时间】：2021-04-18 08:49:19
【问题描述】：

我有一个对象数组

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 中设置值，而不仅仅是显示它。如何做呢？我已经搜索过，但找不到任何解决方案。

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

【问题讨论】：

标签： reactjs react-hooks material-table

【解决方案1】：

请查看明确提及的documentation：

签名：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

【讨论】：

【解决方案2】：

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

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

Material UI doc

【讨论】：

感谢您的回复，但实际上我一直在寻找如何在 TextField 上设置值，而不仅仅是渲染它，而是实际设置它。无论如何谢谢你。干杯！！ :)
哦原来如此，确实和我理解的不一样

【解决方案3】：

所以我想通了...为 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
            />

【讨论】：