删除特定的数组元素，而不仅仅是最后一个带有 .pop - Redux-form 的数组元素

Question

https://codesandbox.io/s/qzm5q6xvx4

我已经创建了上面的代码沙箱。我正在使用 redux-form ([https://redux-form.com](，您可以在其中添加和删除字段以使用.push和.pop2 填充表单。

使用 .pop 的问题只是删除最后一个数组元素，我希望每个 .push 创建的元素都有自己的"删除"按钮的选项，因此不是简单地从数组中删除最后一项。

我想我需要分配.pop以某种方式查看匹配的反应.map元素？

const renderForm = ({ fields, label }) => (
<div>
<div
variant="fab"
color="primary"
className="jr-fab-btn"
aria-label="add"
onClick={() => fields.push()}
>
ADD
</div>
<div
variant="fab"
color="primary"
className="jr-fab-btn"
aria-label="add"
onClick={() => fields.pop()}
>
REMOVE
</div>
{fields.map((newIntel, index) => {
console.log("newIntel", newIntel, index);
return (
<Field
name={newIntel}
key={index}
label={label}
placeholder={label}
component={renderTextField}
placeholder={label}
label={label}
/>
);
})}
</div>
);

欢迎任何想法。

Answer 1

如果你要研究作为 renderForm 的道具的fields，它包含一个remove删除特定元素的方法。只需将索引传递给它即可。 下面是组件的修改代码块。我已经把它变成了类组件：

class renderForm extends React.Component {
render(){
let {fields, label} = this.props;
const removeName = (index) => {
fields = fields.remove(index);
}
return(
<div>
<div
variant="fab"
color="primary"
className="jr-fab-btn"
aria-label="add"
onClick={() => fields.push()}
>
ADD
</div>
{fields.map((newIntel, index) => {
console.log("newIntel", newIntel, index);
return (
<div>
<Field
name={newIntel}
key={index}
label={label}
placeholder={label}
component={renderTextField}
/>
<p
variant="fab"
color="primary"
style={{'cursor': 'pointer'}}
className="jr-fab-btn"
aria-label="add"
onClick={() => removeName(index)}
>
REMOVE
</p>
</div>
);
})}
</div>
)
}}

希望您可以轻松地理解代码块。只需粘贴上面的代码来代替您的 renderForm 组件即可。它会像魔术一样工作。:p