[英]how to dynamically change the input values for each element inside foreach loop?
[英]Javascript / React - How to update the values of a multidimensional array with the values of a `select` input inside of a forEach loop?
我正在嘗試使用 forEach 循環內的select
輸入的值更新多維數組的值。 它是一個包含兩個內部數組的數組。 每次我使用select
輸入更改值時,兩個內部數組都會更新。 如何讓內部數組單獨更新? 代碼沙盒 - https://codesandbox.io/s/multidimensional-array-3v6pmi
更新狀態fxChoices
將其視為多維數組。 請參考 這里的代碼沙箱。
嘗試將狀態設置為每個下拉列表的值。 不要只使用下拉菜單來更改狀態,而是使用它來查看您設置的實際狀態。
像下面這樣組織你的組件。 現在只需更改NUMER_OF_INPUTS
的輸入數量即可。
const NUMER_OF_INPUTS = 2; function App() { const [fxChoices, setFxChoices] = React.useState( Array.from({ length: NUMER_OF_INPUTS }).map(() => [[]]) ); console.log("fxChoices", fxChoices); const onChangeHandler = (compIndex, optionIndex, option) => { setFxChoices((prevState) => prevState.map((item, itemIndex) => { if (itemIndex === compIndex) { const copyItem = [...item]; copyItem[optionIndex] = option; return copyItem; } return item; }) ); }; return ( <div className="App"> {Array.from({ length: NUMER_OF_INPUTS }).map((_, j) => { return ( <div key={j}> <p>bus{j + 1}</p> <SelectComponent compIndex={j} onChangeHandler={onChangeHandler} /> </div> ); })} </div> ); } const SelectComponent = ({ onChangeHandler, compIndex }) => { return Array.from({ length: 2 }).map((_, i) => ( <div key={i} style={{ display: "flex", flexDirection: "column" }}> <select onChange={(e) => { onChangeHandler(compIndex, i, e.target.value); }} className="effect-select" > <option value={`bs${i + 1}-fx${i + 1}`}>{`FX${i + 1}`}</option> <option value="reverb">Reverb</option> <option value="delay">Delay</option> <option value="chorus">Chorus</option> <option value="chebyshev">Chebyshev</option> <option value="pitch-shift">PitchShift</option> <option value="compressor">Compressor</option> </select> </div> )); }; ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>
注意:在設計組件時嘗試像構建盒子一樣思考。
也許更容易映射您的多維數組以輕松訪問索引,如下所示
import { useState } from "react";
import "./styles.css";
export default function App() {
const Options = () => {
const [fxChoices, setFxChoices] = useState([...Array(2)].map(() => [...Array(2)].map(() => null)));
console.log(fxChoices)
return (<>
{fxChoices.map((item, i) => (
<div key={i}>
<p>bus{i + 1}</p>
<div style={{ display: "flex", flexDirection: "column" }}>
{item.map((_, index) => <select
onChange={(e) => {
fxChoices[i][index] = e.target.value
setFxChoices(fxChoices);
console.log("fxChoices", fxChoices);
}}
className="effect-select"
>
<option value={`bs${i + 1}-fx${i + 1}`}>{`FX${i + 1}`}</option>
<option value="reverb">Reverb</option>
<option value="delay">Delay</option>
<option value="chorus">Chorus</option>
<option value="chebyshev">Chebyshev</option>
<option value="pitch-shift">PitchShift</option>
<option value="compressor">Compressor</option>
</select>)}
</div>
</div>
))
}
</>
);
};
return (
<div className="App">
<Options />
</div>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.