Не удается установить значение по умолчанию в React-Select

#reactjs #react-select

Вопрос:

Я использую библиотеку React-Select в своем проекте react, я застрял в точке, где я хочу установить значение по умолчанию для первого параметра select, отображаемого в цикле.

Вот код ниже для вашего понимания

 export default function FormSection() {
  const options = [
    { value: "Titular", label: "Titular", isDisabled: true },
    { value: "Conjuge", label: "Conjuge" },
    { value: "Filho(a)", label: "Filho(a)" },
  ];

  const formik = useFormik({
    initialValues: {
      relation: null,
    },

    onSubmit: (values) => {
      console.log(values);
    },
  });

  const calcFormikValuesSelect = (index) => {
    if (formik.values.relation == null) {
      return null;
    } else if (formik.values.relation) {
      let allrelation = formik.values.relation;
      return allrelation[index];
    }
  };
  const handleChangeRelation = (selectedOption, index) => {
    console.log(selectedOption, index);
    formik.setFieldValue(`relation[${index}]`, selectedOption);
    // formik.setFieldValue('firstSmoker', selectedOption)
  };

  return (
    <div className="secondSection">
      <form onSubmit={formik.handleSubmit}>
        {Array.apply(null, { length: 3 }).map((item, index) => (
          <React.Fragment>
            <div className="wrapper-person-2">
              <p className="tab-text">Profissão</p>
              <Select
                value={calcFormikValuesSelect(index)}
                name={`relation[${index}]`}
                onChange={(selectedOption) =>
                  handleChangeRelation(selectedOption, index)
                }
                options={options}
                className="select-smoker"
              />
            </div>
          </React.Fragment>
        ))}

        <button type="submit" className="button-enabled">
          CONTINUE
        </button>
      </form>
    </div>
  );
}
 

Поэтому для индекса=0 я хочу установить значение по умолчанию

{значение:’Титульный,метка:’Титульный}

и отключил этот выбор, чтобы выпадающий список не отображался при щелчке, а затем для индекса выше 0 я хочу показать параметры в виде массива параметров

Я попытался передать опору для реакции-Выберите, как

Значение по умолчанию:{метка:»Титульный»,значение:»Титульный»}

но это не работает

«реагировать-выбирать»: «^4.3.1»,

Надеюсь, кто-нибудь мне поможет, спасибо !

Комментарии:

1. Это многозначный выбор?

2. нет @МанишдЖангир

Ответ №1:

Чтобы установить значение по умолчанию в formik, вам необходимо указать его следующим initialValues образом:

 const formik = useFormik({
    initialValues: {
      relation: {0: options[0] } OR [options[0]], // depends on how you put it
    },

    onSubmit: (values) => {
      console.log(values);
    },
});