更新 MaterialUI 的“TextField”值會導致頁面上的其他 TextField 值清除

Question

當在輸入中檢測到更改時，我正在嘗試更新 TextField 的 label。

這是我的 state 最初：

state = {
    loginDetails: {
        email: "email@gmail.com",
        password: "password"
    },
    isLoading: false,
    error: null
};

這是我的 MatUI TextField 元素的樣子：

<TextField
    type="text"
    name="email"
    label="email"
    value={this.state.loginDetails.email || ""}
    variant="outlined"
    onChange={this.change}
/>
<TextField
    type="password"
    name="password"
    label="password"
    value={this.state.loginDetails.password || ""}
    variant="outlined"
    onChange={this.change}
/>

每當在 TextField 本身中檢測到更改時，就會觸發此 function：

change = event => {
    this.setState({
        loginDetails: { [event.target.name]: event.target.value }
    });
};

我相信這一行： loginDetails: { [event.target.name]: event.target.value }是問題所在。

如果我的 state 如下所示，並進行以下更改 function，則一切正常，並且沒有清除/重置：

state = {
    email: "email@gmail.com",
    password: "password"
    isLoading: false,
    error: null
};

...

change = event => {
    this.setState({ [event.target.name]: event.target.value });
};

但是，出於多種原因，我希望 email 和密碼位於其自己的 object 中。

這是頁面在初始加載時的樣子

這是單擊密碼字段並輸入字符后發生的情況（email 字段清除）

Answer 1

你是對的，問題就在這里

this.setState({
    loginDetails: { [event.target.name]: event.target.value }
});

這將保留username或password ，因為您只分配一個字段loginDetails: { [event.target.name]: event.target.value } ，

所以將其更改為：

this.setState((state) => {
    loginDetails: {
        ...state.loginDetails, // <--- get username and password
        [event.target.name]: event.target.value // <--- over write the field
    }
});

Answer 2

從你的代碼

change = event => {
    this.setState({
        loginDetails: { [event.target.name]: event.target.value }
    });
};

您將loginDetails替換為帶有單個字段 (event.target.name) 的 object

嘗試合並 object 而不是替換它。

例如

change = event => {
    const newLoginDetails = Object.assign(
        {},  
        this.state.loginDetails,
        { [event.target.name]: event.target.value }
    )
    this.setState({
        loginDetails: newLoginDetails
    });
};