如何使用“文本输入”以“状态”更改和保存嵌套数据

Posted 2023-02-20

Material-ui版本：0.1

状态值：

formatter = [
      currencyField: "", amountField: ""
      accountField: "", amountField: ""
      numberField: ""
    ]

我需要使用state中的mui.TextField组件来更改material-ui中对象的每个元素。

let formatterJson = JSON.parse(this.state.formatter);
let jsx = [];
for (const prop in formatterJson) 
jsx.push(this.getTextField(prop, formatterJson[prop]));

getTextField(key, objVal) 
        return (
            <mui.TextField
                style=fontSize: '14px', marginRight: '10px'
                name=key
                value=objVal
                fullWidth=false
                hintText=key
                onChange=(event) => 
                    objVal = event.target.value
                
            />
        )
    

答案

TextField值未更改，因为发送到val的getTextField始终相同。为了解决这个问题，您需要将onChange val = event.target.value;中的值重新设置回该组件。

实现它的一种方法是，复制原始JSON并将其保存在状态中，并且当任何字段的值更改时，请使用新近更新的json相应地更新json setState。