這是我的物件：
const [opportunity, setOpportunity] = useState({
name: '',
description: '',
experience: '',
});
我想將它存盤在機會體驗屬性中，就像用逗號分隔的字串一樣。例如：'experience_1，experience_2，experience_3'。
但是當我在輸入欄位中輸入時，我希望能夠在單詞之間留出空格。比如這樣：experience_1 experience_2 experience_3
這是我的輸入欄位代碼：
<InputField
type='text'
value={opportunity.experience.split(',').join(' ')} // i think i need changes here
onChange={(e) => setOpportunity({ ...opportunity, experience: e.currentTarget.value.split(" ").filter(x => x !== '').toString() })} // i think this works
label={"Experiences"}
/>
任何幫助家伙？
uj5u.com熱心網友回復：
在呼叫方法之前替換.filter(x => x !== '')并放置它。這將用一個空格替換多個空格，并防止用戶一次輸入多個空格，同時讓他們更改組件的內容。請記住，.filter()作用于字串的克隆副本，而.replace()作用于字串本身，在這種情況下是事件的當前目標值。.replace(/\s /g, " ").split()InputField
現在它應該按預期作業。
像這樣：
<InputField
type="text"
value={opportunity.experience
.split(",")
.map((x) => x.trim()) // Added .trim() to keep consistent spacing...
.join(" ")} // ...before joining
onChange={(e) => {
setOpportunity({
...opportunity,
experience: e.currentTarget.value
.replace(/\s /g, " ") // If you try to use .filter() here, it won't work
.split(" ")
.toString(),
});
}}
label={"Experiences"}
/>
我還在 state 屬性的每個值上鏈接了一個修剪操作，.map()以在演示期間保持間距一致，以防 state 屬性被初始化，每個體驗值之間有很多空格。
uj5u.com熱心網友回復：
我想這就是我會做的。
首先，experience在您的狀態下應該是一個陣列，因為它更容易處理。您只需要在將其作為道具傳遞時進行轉換。
const [opportunity, setOpportunity] = useState({
name: '',
description: '',
experience: [],
});
接下來，我將把我的處理程式移到它自己的函式中并給它一個名字，因為它已經足夠讓人困惑了。
這個函式現在不需要對陣列做任何事情，因為 in 的值state是一個陣列。
const handleInput = e => {
const experience = e.currentTarget.value.split(" ").filter(x => x !== '')
setOpportunity({ ...opportunity, experience })
}
最后，我們將handleInput函式傳遞給onChange道具，然后傳遞opportunity.experience.join(' ')給value道具。
<InputField
type='text'
value={opportunity.experience.join(' ')}
onChange={handleInput}
label={"Experiences"}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/476714.html
標籤：javascript 反应
上一篇：陣列更改后動態按鈕類不更新