Как мне обновить Redux Form Select Field Options - PullRequest
Новая
       5

Как мне обновить Redux Form Select Field Options

0 голосов
/ 18 июня 2019

В моем проекте мне нужно обновить Select Field Options в зависимости от некоторых условий, но это вызовет проблему.Например, предыдущими параметрами являются

[{ text: "a", value: "a" }, { text: "b", value: "b" }],

и пользователь выбирает: 

{ text: "a", value: "a" }.

Затем, в зависимости от некоторых условий, параметры изменяются на

[{ text: "c", value: "c" }, { text: "d", value: "d" }].

Однако значение для этого поля в форме избыточного числа все еще равно { text: "a", value: "a" }.

Это отправит неверные данные при отправке формы.

Могу ли я в любом случае справиться с этим глобально?Потому что такая ситуация в моем проекте довольно обычная.

Я думаю, что в событии select onChange мы можем проверить, находится ли значение формы в параметрах или нет.Кто-нибудь может дать несколько советов, как это сделать?

Это мой выбранный компонент: 

import React from "react";
import { Form, Popup } from "semantic-ui-react";
import Tooltip from "./Tooltip";

const RenderFieldSelect = ({
  input,
  label,
  placeholder,
  options,
  required,
  meta: { touched, error, warning }
}) => (
  <Popup
    trigger={
      <Form.Select
        {...input}
        label={label}
        onChange={(e, { value }) => input.onChange(value)}
        options={options}
        placeholder={placeholder}
        error={error ? true : null}
        required={required === "Y" ? true : null}
        fluid
      />
    }
    flowing
    hoverable
  >
    <Tooltip touched={touched} error={error} warning={warning} />
  </Popup>
);

export default RenderFieldSelect;

1 Ответ

0 голосов
/ 19 июня 2019

Я нашел решение этой проблемы.Я добавляю DynamicOptionsFlag, чтобы пометить эти поля, могут изменить параметры.Затем, когда визуализируется поле выбора, я проверю, находится ли входное значение в массиве опций.Если нет, значение будет обновлено до "". 

import React from "react";
import { Form, Popup } from "semantic-ui-react";
import Tooltip from "./Tooltip";

const RenderFieldSelect = ({
  input,
  label,
  placeholder,
  options,
  DynamicOptionsFlag,
  required,
  meta: { touched, error, warning }
}) => {
  if (DynamicOptionsFlag==="Y") {
    let flag = false;
    for (let option of options) {
      if (option["value"] === input["value"]) {
        flag = true;
        break;
      }
    }
    if (!flag) {
      input.onChange("");
    }
    }

  return (
    <Popup
      trigger={
        <Form.Select
          {...input}
          label={label}
          onChange={(e, { value }) => input.onChange(value)}
          options={options}
          placeholder={placeholder}
          error={error ? true : null}
          required={required === "Y" ? true : null}
          fluid
        />
      }
      flowing
      hoverable
    >
      <Tooltip touched={touched} error={error} warning={warning} />
    </Popup>
  );
};
export default RenderFieldSelect;
...