使用 redux 表单添加和编辑多个主题答案

【问题标题】：add and edit multiple topics using redux form使用 redux 表单添加和编辑多个主题
【发布时间】：2018-11-21 16:52:28
【问题描述】：

用例是添加主题按钮，单击该按钮应显示添加主题的表单。当用户填写主题表单并点击保存按钮时，该主题应显示在输入框中，并带有编辑按钮而不是添加按钮。可以有多个主题。例如，如果我已经有 4 个主题或在添加后保存了它们，那么它们应该显示为带有编辑按钮。我这样做的方式甚至没有触发handleChange。

我为此创建了一个沙箱，这里就是

https://codesandbox.io/s/koqqvz2307

代码

class FieldArray extends React.Component {
  state = {
    topics: [],
    topic: ""
  };

  handleChange = e => {
    console.log("handleChange", e);
    this.setState({ topic: { ...this.state.topic, topic: e.target.value } });
  };

  handleSubmit = e => {
    e.preventDefault();
    console.log("state of topics array with multiple topics");
  };

  render() {
    return (
      <div>
        <FieldArrayForm
          topics={this.state.topics}
          topic={this.state.topic}
          handleChange={this.handleChange}
          handleSubmit={this.handleSubmit}
        />
      </div>
    );
  }
}

export default FieldArray;



const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} type={type} placeholder={label} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

const renderTopics = ({
  fields,
  meta: { error },
  handleChange,
  handleSubmit,
  topic
}) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push()}>
        Add Topic
      </button>
    </li>
    {fields.map((topicName, index) => (
      <li key={index}>
        <span>
          <Field
            name={topicName}
            type="text"
            onChange={handleChange}
            component={renderField}
            label={`Topic #${index + 1}`}
          />
          <span>
            <button
              type="button"
              title="Remove Hobby"
              onClick={() => fields.remove(index)}
            >
              Remove
            </button>
            {topic ? (
              <button type="button" title="Add" onSubmit={handleSubmit}>
                Edit
              </button>
            ) : (
              <button type="button" title="Add" onSubmit={handleSubmit}>
                Add
              </button>
            )}
          </span>
        </span>
      </li>
    ))}
    {error && <li className="error">{error}</li>}
  </ul>
);

const FieldArraysForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <FieldArray name="topic" component={renderTopics} />
    </form>
  );
};

export default reduxForm({
  form: "fieldArrays", // a unique identifier for this form
  validate
})(FieldArraysForm);

使用 redux-form 时如何保存和显示多个主题？我试图从 fieldarray 中获取这个概念，但我还做不到。

【问题讨论】：

标签： javascript reactjs redux-form

【解决方案1】：

您的handleChange 未定义，这就是您的函数未被调用的原因。

如果您愿意renderTopics 接收handleChange 函数，则应将handleChange 属性传递给FieldArray 组件（根据redux-form docs）：

const FieldArraysForm = props => {
  const { handleChange, handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <FieldArray name="topic" component={renderTopics} handleChange={handleChange} />
    </form>
  );
};

或者，您可以简单地将所有道具从 FieldArraysForm 传递给 FieldArray 组件：

const FieldArraysForm = props => (
  <form onSubmit={handleSubmit}>
    <FieldArray name="topic" component={renderTopics} {...props} />
  </form>
);

【讨论】：

非常感谢。