Блог

Главная - Вопросы по программированию - Комбинация React не выбирает правильное значение

Комбинация React не выбирает правильное значение

#reactjs

Вопрос:

Я совершенно новичок в react и пытаюсь создать форму добавления/редактирования с полем со списком в ней. Я сохранил данные в базе данных, но теперь, когда я загрузил форму, в списке «банк» нет выбранного значения. Похоже, что combo получает значение по умолчанию «Выбрать», и я не знаю, в чем проблема. Мой сервер .net возвращает правильный идентификатор банка из базы данных, а company.bankId также имеет значение.

 interface IProps {
    closeAddEditCompanyModal: any,
    cancelClick: any,
    saveClick: any,
    isVisible: boolean,
    currentCompany: CompanyModel,
}

interface IState {
    company: CompanyModel;
    validationMessage: string,
    isLoading: boolean,
    activeIndex: number;
    selectedIndex: number;
    banks: Array<BankModel>;
    isVisibleAddEditBankDialog: boolean;
}

handleChangeSelect = (key, e) => {
    const company: CompanyModel = { ...this.state.company};
    company[key] = e.value;
    this.setState({ company: { ...company } });
};

<div style={{ minHeight: '50px' }}>
    <FormControl>
        <InputLabel htmlFor="active-label">Banks</InputLabel>
        <Select 
            name="bankId"
            options={this.state.banks.map( bank => ({ 
                value: bank.bankId, 
                label: bank.bankName 
            }))}
            onChange={(e) => this.handleChangeSelect('bankId', e)}
            value={company amp;amp; company.bankId ? company.bankId : ''}
        >   
        </Select>
   </FormControl>

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

1. Не могли бы вы сказать, какой пакет вы используете. Возможно, было бы лучше, если бы вы могли добавить импорт. Если вы не знаете, какие библиотеки следует использовать, я бы предложил использовать интерфейс material ui или react select. Я бы также предложил вам использовать функциональный компонент, а не компонент класса

2. @Kiran Я использую react select . import Select from 'react-select;' import FormControl from '@material-ui/core/FormControl'; import InputLabel from '@material-ui/core/InputLabel';

Ответ №1:

 import { useState } from "react";
import Select from "react-select";

function App() {
  
  const [companyId, setCompanyId] = useState();

  const letterChange = (data) => {
    console.log(data);
    company[data.value] = data.value;
    // you can do here whatever you wish to do
    // setCompanyId(data);
  };

  const banks = [
    { value: "bank1", label: "bank1" },
    { value: "bank2", label: "bank2" },
    { value: "bank3", label: "bank3" },
    { value: "bank4", label: "bank4" },
    { value: "bank5", label: "bank5" },
    { value: "bank6", label: "bank6" },
    { value: "bank7", label: "bank7" },
  ];

  const company = [{
    bank1: { value: "company1", label: "company1" },
    bank2: { value: "company2", label: "company2" },
  }];

  return (
    <>
      <div className="App">
        <Select
          name="bankId"
          options={banks}
          onChange={letterChange}
          value={companyId}
        ></Select>
      </div>
    </>
  );
}

export default App;

Мне все еще не ясно, чего вы здесь пытаетесь достичь. Но вот небольшой фрагмент фрагмента, который может вам помочь.
Пара вещей, на которые я хотел бы указать в вашем коде.

  • Внутри вашего параметра onChange handleChangeSelect вы передаете жестко закодированное значение, передавая BankID в виде строки. Я не знаю, намеренно ли это.
  • Вам не нужно перебирать массив внутри опций. Скорее всего, вы можете просто передать весь массив сам по себе.
  • Это всего лишь предложение, но если вы уже используете пакет пользовательского интерфейса material, вы можете использовать сам пользовательский интерфейс select from material. Это делается просто для того, чтобы избежать использования дополнительных пакетов, если только в этом нет необходимости.
Метки: