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

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

handleChange

我已经为此创建了一个沙盒，现在就在这里

代码

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);

class FieldArray扩展了React.Component{
状态={
主题：[]，
主题：“
};
handleChange=e=>{
console.log（“handleChange”，e）；
this.setState（{topic:{…this.state.topic，topic:e.target.value}}）；
};
handleSubmit=e=>{
e、 预防默认值（）；
log（“包含多个主题的主题数组的状态”）；
};
render（）{
返回(
);
}
}
导出默认字段数组；
常量renderField=（{input，label，type，meta:{toucted，error}}）=>(
{label}
{触摸&&error&&{error}
);
常数renderTopics=({
领域，
元：{error}，
handleChange，
手推，
话题
}) => (


fields.push（）}>
添加主题

{fields.map（（主题名，索引）=>(

字段。删除（索引）}
>
去除
{主题(
编辑
) : (
添加
)}

))}
{error&
{error}
}

);
const FieldArraysForm=props=>{
const{handleSubmit，pristine，reset，submiting}=props；
返回(
);
};
导出默认reduxForm({
表单：“fieldArrays”，//此表单的唯一标识符
验证
})（现场表格）；

---

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

您的

handleChange

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

如果您希望

renderTopics

接收

handleChange

函数，则应将

handleChange

道具传递给

FieldArray

组件（根据）：

---

非常感谢。

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

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