[英]How to create dynamic add input field
当用户输入输入时,我正在尝试创建一个动态添加输入字段,添加按钮将可用于单击。 单击添加后,它将出现另一个输入字段。
这是它的样子:
这是我已经实现的:
const [inputs, setInputs] = useState(
teamData.rules.map((value) => ({
value,
guid: uuidV4(),
}))
);
const addInputs = (event) => {
event.preventDefault();
setInputs((inputs) => [
...inputs,
{
name: `rule_${inputs.length + 1}`,
guid: uuidV4(),
},
]);
};
const removeInputs = (index) => {
const newList = inputs.filter((item, i) => index !== i);
setInputs(newList);
};
const clearInput = (dataName) => {
setUpdateTeamData((prevState) => {
delete prevState[dataName];
return {
...prevState,
};
});
};
<div>
{inputs?.map((data, idx) => {
return (
<div className="agreement-form-grid" key={data.guid}>
<button
type="button"
className="agreement-remove-button"
onClick={() => {
removeInputs(idx);
clearInput(`rule_${idx}`);
}}
>
<Remove />
</button>
<input
name={`rule_${idx}`}
onChange={handleChange}
placeholder={`Rule ${idx + 1}`}
defaultValue={teamData.rules[idx]}
/>
</div>
);
})}
如何实现第一张图片的功能?
你需要两个变量。 一个是存储已添加规则列表的数组,第二个是用于保存尚未添加到数组中的规则值的字符串:
const [rules, setRules] = useState([{ value: "test", id: 0 }]);
const [preAddedRule, setPreAddedRule] = useState("");
然后,通过依赖这些函数,您可以向变量添加和删除规则:
const handleRemove = (id) => {
setRules(rules.filter((rule, i) => rule.id !== id));
};
const handleAdd = (id) => {
setRules([...rules, { value: preAddedRule, id: rules.length }]);
setPreAddedRule("");
};
const handleChange = (e) => {
setPreAddedRule(e.target.value);
};
只需记住在添加到数组后清除preAddedRule
的值,以便为下一个规则做好准备。
最后,显示所有规则、输入和按钮,如下所示:
{rules.map((el, i) => (
<div>
<input value={el.value} />
<button onClick={() => handleRemove(el.id)}>delete</button>
</div>
))}
<input onChange={handleChange} value={preAddedRule} />
<button onClick={() => handleAdd()}>Add</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.