Синтаксический анализ входного значения переключателя ant design

#reactjs #antd

Вопрос:

Я использую ввод переключателя в форме ant design. Ввод переключателя возвращает только true или false (логическое значение). Тем не менее, я хочу, чтобы переключатель возвращал 1 или 2 в моей форме. Как я могу это сделать?

 <Form.Item className="cold-input" name="on" valuePropName="checked">
                <Switch
                    checkedChildren="On"
                    unCheckedChildren="Off"
                />
</Form.Item>

1. Я не уверен, что понимаю, что вы подразумеваете под вводом переключателя — вы имеете в виду, что хотите показать цифры 1 или 2, как в третьем примере здесь, где они показывают 0 или 1? ant.design/components /switch

2. Да, я имею в виду этот ввод. Пользовательский интерфейс показывает 1 или 2, но значение по-прежнему равно true или false. Мне нужно, чтобы значение в форме было 1 или 2

3. Разве вы не можете сохранить значение в состоянии? Итак, у вас есть состояние, представляющее собой число, а затем в функции включения переключателя вы можете сделать что-то вроде: setSwitchState(проверено? 1 : 0);

4. Но тогда как я могу сопоставить это состояние с состоянием формы, в котором я использую ввод переключателя внутри компонента формы: ant.design /components /form

Ответ №1:

В итоге я обработал пример на веб-сайте Ant Designs, где они сделали что-то похожее на то, что вы хотите. Приведенный ниже код отображает значение проверенного состояния переключателя в поле формы. Я также включил ссылку на codepen, где вы можете увидеть значение «вкл.», которое печатается в консоли. Ссылка на codepen находится здесь: https://codepen.io/clawcastle/pen/YzGGmZQ

Функция onChange:

   onSelectedChange = (checked) => {
    this.formRef.current.setFieldsValue({
      on: checked ? 1 : 0
    });
    console.log(this.formRef.current.getFieldValue("on"));
  }

Компонент коммутатора:

 <Form.Item noStyle name="on">
    <Switch
    onChange={this.onSelectedChange}
    checkedChildren="On"
    unCheckedChildren="Off"
    />
</Form.Item>

1. Спасибо, на самом деле у вас есть неплохое решение. Интересно, установил ли я начальное значение: {on: 2} формы равным 2. Как я могу сделать переключатель ложным?

2. Я думаю, вы могли бы установить «проверенную» опору на коммутаторе следующим образом: checked={this.formRef.current.GetFieldValue(«вкл.») === 1}