Typescript React Textfield 不会在 Dropdown 更改时更改值

Question

我有一个带有选项的下拉字段和一个文本字段，它们应该用于将用户输入存储在具有键值对的对象数组中。这发生在 textfield 的 onchange 事件中。此外，文本字段应从数组中检索数据，并在同一文本字段中显示下拉列表更改时的值。

我不确定这是否可行，我只是尝试动态设置文本字段的“defaultValue”属性。

在对象数组中保存用户输入的部分工作正常。但是文本字段中的值不会随着下拉列表的更改而改变。我得到了选定的值，因此在调试时也得到了数组中的值。

我在设置下拉元素的初始值时也遇到了问题。我不希望它在初始化时为空白，而是它应该具有我提供的选项集中的值之一。

下拉菜单：我设置 selectedValue 的地方

<Dropdown

    defaultValue={this.options["foo"]}  //<-- This doesnt work too
    id="Dropdown"
    options={this.options}
    onChange={(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
       this.setState({
                        selectValue : option?.text
                     }, this.onNameChanged);
                     }
             }
 />

文本域：

<TextField
 id="inputVarLang"
 defaultValue={this.state.arrayObj[this.state.selectValue as any]}
 placeholder={"---"}
 onChange={(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>, 
 newValue?: string): void => {
                         this.setState({
                                   arrayObj: update(this.state.arrayObj 
                                   {[this.state.selectValue as any]: {$set: newValue ?? ""}})
                                        }, this.onNameChanged);
                             }
           }/>

如果有人能帮助我，那就太好了。

Answer 1

您需要像这样使用 TextField 的“value”属性而不是 defaultValue

<TextField
 id="inputVarLang"
 value={this.state.arrayObj[this.state.selectValue as any]}
 placeholder={"---"}
 onChange={(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>, 
 newValue?: string): void => {
                         this.setState({
                                   arrayObj: update(this.state.arrayObj 
                                   {[this.state.selectValue as any]: {$set: newValue ?? ""}})
                                        }, this.onNameChanged);
                             }
           }/>

Typescript React Textfield 不会在 Dropdown 更改时更改值

Typescript React Textfield does not change value on Dropdown change

textfield

typescript

reactjs

dropdown