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

Question

https://codesandbox.io/s/qzm5q6xvx4

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

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

我认为我需要分配 .pop 来以某种方式查看匹配的 React .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 的 prop 的 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