我有一個想法，可以根據自己的需要創建簡單的 Web 應用程式。我希望用戶能夠使用選擇串列來定義所需的表單欄位數（例如 1 - 10）。Picklist 將使用文本輸入創建選定數量的組件。用戶可以在文本輸入中鍵入字串，所有資料都將存盤為單一狀態。我可以只說 string1、string2 和 10 個狀態就可以做到，但我想知道這是否可以作為單個狀態可行，因為我希望所有文本輸入都以令牌的形式創建單個字串。
示例：用戶選擇 3 個文本輸入：
- 你好
- 你好
- 再見
這將形成 {hi/hello/goodbye} 的標記。
請讓我知道如何使用 React 處理這個問題。
謝謝。
uj5u.com熱心網友回復：
也許您可以使用狀態內的一組物件來解決這個問題，然后再評估這些值。我不確定你想做什么，但如果你想創建一個生成動態輸入的應用程式，并在相應的狀態中設定值，你可以做這樣的事情。
export default function DinamicLinks() {
const [quantity, setQuantity] = useState(0)
const [messages, setMessages] = useState([])
const createInputs = (quantity) => {
const params = []
for (let i = 1; i <= quantity; i ){
let param = {name:i};
params.push(param)
}
return params
}
const handleMessages = (passedMessage) => {
const filteredMessages = messages.filter((message) => message.name !== passedMessage.name)
setMessages([...filteredMessages, passedMessage])
}
return (
<div className="App">
<button onClick={() => setQuantity(quantity 1)}>More inputs</button>
<button onClick={() => setQuantity(quantity - 1)}>Less inputs</button>
{createInputs(quantity).map(({name}) => <input key={name} onChange={(e) => handleMessages({name, message:e.currentTarget.value})}></input>)}
<button onClick={() => console.log(messages)}>See messages</button>
</div>
);
}
此代碼將動態生成輸入并將其值存盤在狀態中，將物件存盤在陣列中，稍后您可以實作邏輯以按照您想要的方式處理文本。順便說一句，這段代碼的性能不是最好的，但我想快速為您提供簡單的解決方案。毫無疑問，有更好的方法可以做到這一點，而且值得一提的是，不要像我在這個例子中那樣濫用箭頭函式，這是在 React 中遇到性能問題的一種簡單方法。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/399860.html