我想要做的是添加和洗掉輸入欄位。
export default function AddInput() {
const [inputList, setInputList] = useState([{ items: "" }]);
const handleAddClick = () => {
setInputList([...inputList, { items: "" }]);
};
const handleItemChanged = (event, index) => {
const { items, value } = event.target;
const list = [...inputList];
list[index][items] = value;
setInputList(list);
console.log('list', list)
console.log('value', value)
console.log('items', items)
};
const handleRemoveClick = (index) => {
const list = [...inputList];
list.splice(index, 1);
setInputList(list);
};
return (
<div>
<div>
{inputList.map((o, i) => {
return (
<tr key={"item-" i}>
<td>
<div>
<input
type="text"
value={o.items}
autoComplete="off"
onChange={event => handleItemChanged(event, i)}
/>
</div>
</td>
</tr>
)
)}
</div>
</div>
問題是當我在輸入中輸入一個單詞時，它不會寫任何東西。在我的控制臺中，它顯示專案是undefinded.
我該如何解決？
uj5u.com熱心網友回復：
正如我所看到的，您正在嘗試將值存盤在多個輸入框中并想要呈現它
你在做什么錯？
1.試圖從event.target
2 為未定義的成員賦值 list[index][items] = value;
那么，該怎么做才能讓它發揮作用呢？
我假設專案只是您從輸入框獲得的文本，如果是這樣的話，
您可以像這樣更正輸入處理程式
const handleItemChanged = (event, index) => {
//old code,there is no node named items in event.target
//const { items, value } = event.target;
const value=event.target.value;
const list = [...inputList];
//old code,since items is undefined you cant access it this way
//list[index][items] = value;
//the correct way to do it
list[index].items=value;
setInputList(list);
console.log('list', list)
console.log('value', value)
console.log('items', list[index].items)
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/455458.html
標籤：反应
上一篇：路由在React.js中回傳白頁