Блог

Итак, у меня эта странная проблема (и я все еще новичок в этом), но у меня есть выпадающий список, из которого я хочу иметь возможность выбирать и передавать обратно в форму для отправки. это отлично работает, когда я делаю выпадающие строки вручную, но когда я извлекаю их из серверной части, а затем сопоставляю и пытаюсь обработать onSelect, но событие onSelect продолжает возвращать null — так запутано — вы видите что-нибудь очевидное в этом коде?

 import React, { useEffect, useState } from 'react';
import { useHttpClient } from '../hooks/http-hook';
import { validate } from '../util/validators';
import 'bootstrap/dist/css/bootstrap.min.css';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';

import './Input.css';

const Select = props => {
  console.log('props.id='   props.id);
  console.log('props.label='   props.label);
  const [selValue, setSelValue] = useState('');


  const { isLoading, error, sendRequest, clearError } = useHttpClient();
  const [loadedFoodgroups, setLoadedFoodgroups] = useState([]);
  useEffect(() => {

    const fetchFoodgroups = async () => {
      try {
        const responseData = await sendRequest('http://localhost:5000/api/foodgroups')
        setLoadedFoodgroups(responseData);
        console.log('ResponseData'   JSON.stringify(responseData));

      } catch (err) { }
    };
    fetchFoodgroups();
  }, [sendRequest]);



  const handleSelect = (event) => {
    event.preventDefault();
    console.log('Select.js: handleSelect- event e='   event.target.value);
    setSelValue(event.target.value);
  }
  return (
    <React.Fragment>
      <DropdownButton
        className="form-control__select"
        alignRight
        title="Foodgroups"
        id="dropdown-menu-align-right"
        onSelect={handleSelect}
        value={selValue}
      >
        <label htmlFor={props.id}>{props.label}</label>
        {loadedFoodgroups.map(selectOptions => (
          <Dropdown.Item
            key={selectOptions.id}
            className="form-control__select"
            eventkey={selectOptions.id}>{selectOptions.name}
          </Dropdown.Item>
        ))}

      </DropdownButton>
    </React.Fragment>
  );
};
export default Select;
  

Хотя на основную проблему дан ответ в некоторых других вопросах (вроде), у вас есть несколько вещей, которые вам нужно изменить, поэтому вот более конкретный ответ для вас:

Во-первых, сигнатура onSelect есть (eventKey, event) => ... , но в моем тестировании второй параметр бесполезен (цель равна null). Поэтому, даже если вы переключитесь на использование второго параметра в своем обработчике, это, вероятно, не сработает. Вместо этого большинство людей, похоже, используют eventKey параметр следующим образом:

 const handleSelect = eventKey => {
  event.preventDefault();
  setSelValue(eventKey);
}
  

Что, вероятно, соответствовало бы вашим потребностям.

Прежде чем это сработает для вас, необходимо исправить три опечатки:

 <Dropdown.Item
  key={selectOptions._id}. <--you have ".id" i your code but the data is "._id"
  className="form-control__select"
  eventKey={selectOptions.name}  <--you have "eventkey", with lowercase "k",             
                      // should be upper case.  
                      // You probably want the ".name" property here rather than
                      // "id", this is what will be passed into "onSelect"
>
  

Итак, если вы измените свой обработчик на использование первого параметра как eventKey и исправите опечатки выше, вы сможете установить состояние на значение, выбранное из выпадающего списка. кнопка.