Question

我已经创建了上面的代码和框。我正在使用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

如果您要查看fields（它是renderForm的道具），则它包含一种方法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

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

1 个答案: