Использование React-Select с React-Final-Form

Я использую React-Select в React-Final Form. Когда параметр выбирается с помощью React-Select, он передает объект, а не одно значение example {label: Foo, value: 100}. Мне нужно только передать значение обратно на сервер. В Redux-Forms вы могли делать props.change(), но, похоже, это не вариант с React-Final-Forms. Я пробовал писать функцию onChange для хранения вещей в состоянии, но когда я это делаю, ввод React-Select больше не содержит значения.

ФОРМА


onSubmit = (data) => {
    if (data.incidentNumber) {
      //incident being
      this.props.incidentActions.editincident(data);
    } else {
      //new incident is being created
      this.props.incidentActions.createnewincident(data);
    }
  };

ReactSelectAdapter = ({ input, ...rest }) => (
    <Select {...input} {...rest} searchable />
  );

<Form
        onSubmit={this.onSubmit}
        render={({ handleSubmit, form, submitting, pristine, values }) => (
          <form onSubmit={handleSubmit}>
            <Row>
              <Col>
                <Label label="Water System" htmlFor="systemId" required />
                  <Field
                    name="systemId"
                    component={this.ReactSelectAdapter}
                    options={systems}
                    className="mb-2"
                  />
              </Col>
            </Row>
            .... more fields

ПРИМЕР ПРЕДОСТАВЛЕННОЙ ФОРМЫ ДАННЫХ:

 {
   "systemId":{"label":"ACME WATERSYSTEM","value":577},
   "description":"a water system"
}

Как я могу заставить его передавать только обратно:

{
   "systemId":577,
   "description":"a water system"
}

reactjs react-final-form
person reactFullStackDeveloper    schedule 25.02.2021    source источник
comment
не могли бы вы показать свой onSubmit метод?   -  person Mezbaul Haque    schedule 25.02.2021
comment
@MezbaulHaque - Я добавил его в ОП   -  person reactFullStackDeveloper    schedule 25.02.2021

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать некоторые преобразования внутри onSubmit, чтобы получить желаемый формат. Что-то вроде:

onSubmit = (data) => {
    data = {
        ...data,
        systemId: data.systemId ? data.systemId.value : null,
    };

    if (data.incidentNumber) {
      //incident being
      this.props.incidentActions.editincident(data);
    } else {
      //new incident is being created
      this.props.incidentActions.createnewincident(data);
    }
  };
person Mezbaul Haque    schedule 25.02.2021
comment
Спасибо! Я слишком усложнял это, ища библиотечное решение, когда обычный старый JS помогает. Я переупорядочил свои значения так, чтобы имя поля, которое должно содержать systemId, было передано обратно. - person reactFullStackDeveloper; 25.02.2021