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

用例中会有add topic按钮,单击该按钮时应该会显示一个用于添加主题的表单。当用户填写主题表单并点击保存按钮时,该主题应该显示在带有编辑按钮的输入框中,而不是显示为添加。可以有多个主题。例如,如果我已经有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表单时如何保存和显示多个主题?我试着从fieldarray中获取这个概念,但还不能做到。