добавьте и отредактируйте несколько тем используя редукционную форму - PullRequest
Новая
       6

добавьте и отредактируйте несколько тем используя редукционную форму

0 голосов
/ 12 июня 2018

Вариант использования: кнопка добавления темы, при нажатии на которую должна отображаться форма для добавления темы.Когда пользователь заполняет форму темы и нажимает кнопку сохранения, эта тема должна отображаться в поле ввода с кнопкой редактирования вместо добавления.Там может быть несколько тем.Например, если у меня уже есть 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);

Как сохранить и показать несколько тем при использовании избыточной формы?Я пытался взять концепцию из fieldarray, но пока не смог.

1 Ответ

0 голосов
/ 13 июня 2018

Ваш 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>
  );
};

В качестве альтернативы, вы можете просто передать все реквизиты из FieldArraysForm в компонент FieldArray:

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