首頁猿問如何編輯 TextField...

如何編輯 TextField 值，該值已預(yù)先定義

JavaScript

泛舟湖上清波郎朗 2022-12-22 10:02:18

我有一個表格，其中包含來自某個國家/地區(qū)的一些數(shù)據(jù)。默認(rèn)情況下，數(shù)據(jù)是只讀的，如果用戶想要更改值，請單擊編輯按鈕。問題是我無法編輯中的值TextInput，默認(rèn)情況下，該值value已經(jīng)預(yù)先定義。我嘗試通過編輯該值onChange()，但它不起作用。我鍵入的所有內(nèi)容都沒有出現(xiàn)在輸入字段中。這是我的代碼，我放在 CodeSandBox 中：https ://codesandbox.io/s/polished-water-muq69?file=/src/App.js我在用著TextField來自react-material.有人可以幫我更新那個值嗎？先感謝您。

查看完整描述

4 回答

寶慕林4294392

TA貢獻(xiàn)2021條經(jīng)驗獲得超8個贊

正如其他人所說，問題是您需要onChange并value指向狀態(tài)中的相同值/變量。

更進(jìn)一步，我將清除狀態(tài)中的所有這些變量并僅使用一種方法來更改屬性（例如，如果您有很多字段并且代碼足夠長）

const changeField = (name, value) => {

let newCountryInfo = [...countryInfo];

newCountryInfo[0].data.Country[0][name] = value;

setCountry(newCountryInfo);

};

并且在每個TextField你添加的東西取決于領(lǐng)域如下

onChange={event => {

changeField("name", event.target.value);

}}

檢查此代碼和框鏈接

反對回復(fù) 2022-12-22

FFIVE

TA貢獻(xiàn)1797條經(jīng)驗獲得超6個贊

問題在這里：

value={item.data.Country[0].name}

您在屬性中設(shè)置的任何內(nèi)容都value將保留在其中。因此，不是在此處傳遞您的 API 響應(yīng)，而是在其中傳遞一個狀態(tài)值，并根據(jù)輸入值的變化更新該狀態(tài)（2 種方式數(shù)據(jù)綁定）。它將解決問題。

您必須做出的改變：

const [countryName, setCountryName] = useState("");

onChange={event => {

setCountryName(event.target.value); // This will update the state

}}

value={countryName} // updated state value is used here

反對回復(fù) 2022-12-22

慕桂英3389331

TA貢獻(xiàn)2036條經(jīng)驗獲得超8個贊

使用 State 屬性作為值

const [國家名稱, setCountryName] = useState("");

<TextField

className={classes.field}

disabled={disabledField}

label="Name"

value={countryName}

onChange={event => {

setCountryName(event.target.value);

}}

variant="outlined"

InputLabelProps={{

shrink: true

}}

/>

在useState("")內(nèi)部，定義初始值或預(yù)定義值。

反對回復(fù) 2022-12-22

catspeake

TA貢獻(xiàn)1111條經(jīng)驗獲得超0個贊

我不是 React 專家，但似乎 React 組件正在覆蓋所有正在輸入的更改。您可以在開發(fā)控制臺上看到它，只需刪除 value="brazil" 并嘗試輸入內(nèi)容，value="brazil" 將彈出回到輸入標(biāo)簽。我可以建議用占位符替換值。這樣，用戶仍會看到舊值，并且能夠鍵入新值。

反對回復(fù) 2022-12-22