Typescript React Textfield 在下拉更改时不会更改值

Question

我有一个带有选项的下拉字段和一个文本字段，用于将用户输入存储在具有键值对的对象数组中。这发生在文本字段的 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);
                             }
           }/>