[英]How to dynamically add items to option in select tag (dropdown) in React
I am making a dynamic form component which takes input from the user and stores it in JSON format and then creates a form for the end-user.我正在制作一个动态表单组件,它从用户那里获取输入并将其存储为 JSON 格式,然后为最终用户创建一个表单。 I have to dynamically add values to select tag options but one error is coming TypeError: data.emplist is not iterable我必须动态添加值以选择标签选项,但出现一个错误 TypeError: data.emplist is not iterable
const addNewEmp=()=>{
61 | setEmpList((data)=>({
62 | inputValue: '',
> 63 | emplist: [
| ^ 64 | ...data.emplist,
65 | {
66 | empName: data.inputValue
I have done several changes but cant figure out whats wrong.我做了一些更改,但无法弄清楚出了什么问题。 My code Below我的代码如下
import React, { useState } from 'react'
const Select = () => {
const [inputValue,setInputValue] = useState('')
const [emplist, setEmpList] = useState([
{
empName: '---Select---'
}
]);
const addNewEmp=()=>{
setEmpList((data)=>({
inputValue: '',
emplist: [
...data.emplist,
{
empName: data.inputValue
}
]
}))
}
let empRecords = emplist.map((data) => {
return <option>{data.empName}</option>;
});
return (
<>
<input
type="text"
placeholder="add options"
onChange={(e)=> setInputValue(e.target.value)}
/>
<button onClick={addNewEmp}>Add +</button>
<br />
<select>{empRecords}</select>
{inputValue}
</>
);
}
export default Select
You addEmpList
function is overriding the old value of your empList
which started as an Array
with an Object
.您的addEmpList
函数正在覆盖您的empList
的旧值,该值以带有Object
的Array
开始。 This is why you are getting this error because after you add a new item you cannot iterate over it anymore since Object
do not have a definition of the Symbol.iterator
as the Array
does.这就是您收到此错误的原因,因为在添加新项目后,您无法再对其进行迭代,因为Object
没有像Array
那样定义Symbol.iterator
。 Meaning you cannot iterate over an object.这意味着您不能迭代对象。
If you want to dynamically add a new item to a select in React as stated in your question, you should be storing the result of your input change in a state, and whenever you need to (like a form submit), you can add this item in an array of items that will contain the dynamic options that will get rendered by React whenever this state change.如果您想按照问题中的说明动态地将新项目添加到 React 中的选择中,您应该将输入更改的结果存储在一个状态中,并且无论何时需要(如表单提交),您都可以添加这个项目数组中的项目,其中包含动态选项,每当此状态更改时,React 将呈现这些选项。
import React, {useState, useCallback} from "react";
const Select = () => {
const [options, setOptions] = useState([]);
const [text, setText] = useState("");
const [value, setValue] = useState("");
const handleTextChange = useCallback(changeEvent => {
setText(changeEvent.currentTarget.value);
}, [setText]);
const handleValueChange = useCallback(changeEvent => {
setValue(changeEvent.currentTarget.value);
}, [setValue]);
const handleSubmit = useCallback(submitEvent => {
submitEvent.preventDefault();
setOptions([
...options,
{
key: window.crypto.randomUUID(),
text,
value
}
]);
}, [text, value, options, setOptions]);
return (
<>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="text">
Text
</label>
<input id="text" type="text" value={text} onChange={handleTextChange} />
</div>
<div>
<label htmlFor="value">
Value
</label>
<input id="value" type="text" value={value} onChange={handleValueChange} />
</div>
<button type="submit">
Add
</button>
</form>
<select>
{options.map(currentOption => (
<option key={currentOption.key} value={currentOption.value}>
{currentOption.text}
</option>
))}
</select>
</>
);
};
export default Select;
No need to write data.emplist
or data.inputValue
, you can directly access those things不需要写data.emplist
或data.inputValue
,你可以直接访问那些东西
setEmpList((data)=>({
inputValue: '',
emplist: [
...emplist,
{
empName: inputValue
}
]
}))
Answer回答
import React, {useState } from "react";
const Select = () => {
const [inputValue, setInputValue] = useState("");
const [emplist, setEmpList] = useState([]);
let empRecords =
emplist.length > 0 &&
emplist.map((data) => {
return (
<option value={data.empName} key={data.empName}>
{data.empName}
</option>
);
});
const addNewEmp = () => {
const addItems = {
empName: inputValue,
value: inputValue,
};
const addEmp = [...emplist];
addEmp.push(addItems);
setEmpList(addEmp);
};
return (
<>
<input
type="text"
placeholder="add options"
onChange={(e)=> setInputValue(e.target.value)}
/>
<button onClick={addNewEmp}>Add +</button>
<br />
<select>{empRecords}</select>
{inputValue}
</>
);
};
export default Select;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.