Выбрать со значением prop внутри Form.Item не будет отражать никаких изменений этого значения prop

Question

У меня проблемы с формами antd в отношении ввода Select. У меня есть два Select входа, и мне нужен второй вход для «сброса» первой опции, когда первый вход меняет значение.

I необходимо отслеживать каждое значение Select с помощью React.useState, потому что - в моем реальном коде - эти значения используются для отправки запроса к бэкэнду и повторного заполнения других Select входных данных, кроме первого и каждого Select имеют различное количество опций, поэтому желательно, чтобы они получили «сброс» к первому варианту.

Как мне добиться того, что я ищу?

Answer 1

Поскольку вы решили управлять полем ввода с значением и onChange ,

Вам не нужна форма имя , удалите it.

Затем установите первый рычаг, проверьте, изменилось ли значение, чтобы решить, следует ли установить второе значение по умолчанию.

import React from "react";
import ReactDOM from "react-dom";
import { Select, Form } from "antd";
import "antd/dist/antd.css";

const fieldA = [{ value: 1, text: "Hello" }, { value: 2, text: "World" }];
const fieldB = [{ value: 1, text: "A" }, { value: 2, text: "B" }];

const App = () => {
  const [valueA, setValueA] = React.useState(null);
  const [valueB, setValueB] = React.useState(null);
  const setFieldA = (value: number) => {
    if (valueA !== value) {
      setValueB(null);
    }
    setValueA(value);
  };

  const setFieldB = (value: number) => {
    setValueB(value);
  };

  return (
    <Form layout="vertical">
      <Form.Item label="Field A">
        <Select value={valueA} onChange={setFieldA}>
          {fieldA.map(field => (
            <Select.Option value={field.value}>{field.text}</Select.Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item label="Field B">
        <Select value={valueB} onChange={setFieldB}>
          {fieldB.map(field => (
            <Select.Option value={field.value}>{field.text}</Select.Option>
          ))}
        </Select>
      </Form.Item>
      <div>
        Field A "real" value: {valueA}
        <br />
        Field B "real" value: {valueB}
      </div>
    </Form>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

Если вы добавите Select в Form и Form.Item и установите имя для Form.Item, Select полностью контролируется Form. Вам необходимо использовать API формы для управления Select или просто удалить name

import React from "react";
import ReactDOM from "react-dom";
import { Select, Form } from "antd";
import "antd/dist/antd.css";

const fieldA = [{ value: 1, text: "Hello" }, { value: 2, text: "World" }];
const fieldB = [{ value: 1, text: "A" }, { value: 2, text: "B" }];

const App = () => {
  const [myvalues, setMyvalues] = React.useState({ valueA: 1, valueB: 1 });
  const setFieldA = (value: number) => {
    setMyvalues({ valueA: value, valueB: 1 });
    form.setFieldsValue({ valueA: value, valueB: 1 });
  };
  const setFieldB = (value: number) => {
    setMyvalues({ ...myvalues, valueB: value });
    form.setFieldsValue({ ...myvalues, valueB: value });
  };
  const [form] = Form.useForm();
  return (
    <Form layout="vertical" form={form} initialValues={myvalues}>
      <Form.Item name="valueA" label="Field A" shouldUpdate>
        <Select value={myvalues.valueA} onChange={setFieldA}>
          {fieldA.map(field => (
            <Select.Option value={field.value}>{field.text}</Select.Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item name="valueB" label="Field B" shouldUpdate>
        <Select value={myvalues.valueB} onChange={setFieldB}>
          {fieldB.map(field => (
            <Select.Option value={field.value}>{field.text}</Select.Option>
          ))}
        </Select>
      </Form.Item>
      <div>
        Field A "real" value: {myvalues.valueA}.<br />
        Field B "real" value: {myvalues.valueB}
      </div>
    </Form>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вы можете проверить здесь CodeSandBox . Надеюсь, это поможет