Блог

У меня есть диалоговое окно, в котором пользователь может создать новый тур. Я хочу добавить опцию выбора, чтобы выбрать количество создаваемых туров. В настоящее время компонент не выполняет повторную передачу onChange, и сумма не сохраняется. Я был бы очень признателен за помощь 🙂

Мой код выглядит следующим образом :

   const [selectedOption, setSelectedOption] = useState({amount:''});

  const handleSelectChange = (event) => {
    const amount = event.target.amount;
    setSelectedOption({
      ...selectedOption,
      [amount]: event.target.value,
    });
  };
<FormControl className={classes.formControl}>
                  <InputLabel
                    htmlFor="text-simple"
                    required
                  >{t('Anzahl Touren')}</InputLabel>
                  <Select
                      native
                      value={selectedOption.amount}
                      onChange={handleSelectChange}
                      inputProps={{
                        amount: 'amount'
                      }}
                  >
                    <option value={1}>1</option>
                    <option value={2}>2</option>
                    <option value={3}>3</option>
                    <option value={4}>4</option>
                  </Select>
                </FormControl>
 

Редактировать:
Ошибка получения: у каждого дочернего элемента в списке должен быть уникальный ключ.

 const numberList = ['1','2','3','4','5']
                <FormControl className={classes.formControl}>
              <InputLabel
                htmlFor="text-simple"
                required
              >{t('Anzahl Touren')}</InputLabel>
              <Select
                  name="amount"
                  input={<Input id="text-simple"/>}
                  required
                  native
                  value={selectedOption.amount}
                  onChange={handleSelectChange}
              >
                {numberList.map((amount,index) => {
                  return(
                      <option
                      key={index}
                      value={amount}>
                        {amount}
                      </option>
                  )
                })}
              </Select>
            </FormControl>
 

Попробуйте этот подход,

Задайте name поле для select . И обновите состояние на основе поля name.

как показано ниже,

      <Select
          name="amount"  <--- Add this change
          native
          value={selectedOption.amount}
          onChange={handleSelectChange}
          inputProps={{
            amount: "amount"
          }}
        >
 

handleSelectChange метод:-

  const amount = event.target.name;
 

Полный код:-

 import { FormControl, InputLabel, Select } from "@material-ui/core";
import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [selectedOption, setSelectedOption] = useState({ amount: "" });

  const handleSelectChange = (event) => {
    console.log(event.target.name, event.target.value);
    const amount = event.target.name;
    setSelectedOption({
      ...selectedOption,
      [amount]: event.target.value
    });
  };

  return (
    <>
      <FormControl>
        <InputLabel htmlFor="text-simple" required>
          Anzahl Touren
        </InputLabel>
        <Select
          name="amount"
          native
          value={selectedOption.amount}
          onChange={handleSelectChange}
          inputProps={{
            amount: "amount"
          }}
        >
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
        </Select>
      </FormControl>
      Selected Amount - {selectedOption.amount}
    </>
  );
}
 

Рабочий код — https://codesandbox.io/s/proud-wave-4dz0u?file=/src/App.js:0-1080