Реагировать на выпадающий список - как остановить динамически создаваемые выпадающие списки всех обновлений одновременно - PullRequest
Новая
       20

Реагировать на выпадающий список - как остановить динамически создаваемые выпадающие списки всех обновлений одновременно

1 голос
/ 17 февраля 2020

Я динамически отображаю большой список карт, используя React хуки, и у каждого компонента есть свой раскрывающийся список. Если я выберу одну опцию, которая обновляет состояние компонента, каждый выпадающий список обновляется до одного и того же значения. Я попытался реализовать опцию select React и отдельно React-dropdown, и ни один из моих подходов не работает. Я осознаю, что проблема заключается в том, что при обновлении любого раскрывающегося списка все они ссылаются на одно и то же значение в состоянии, и если я закомментирую обновление состояния, раскрывающиеся списки работают.

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

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

<select onChange(event=> selectedDropdownItem(selection)
  value={event.target.value}
  >
  dropdownList.map(name =>
  <option key={name.id} value={name.id} label={name.name} />
</select>

const [header, setHeader] = useState({ name: “select name”, id: null })

selectedDropdownItem = selection => {
  setHeader({
    name: selection.name,
    id: selection.id
  })
}

1 Ответ

0 голосов
/ 18 февраля 2020

Поскольку я не очень ясно понимаю ваш вопрос о множественном выборе в одном компоненте. Я только что создал один, который будет делать динамический выпадающий список c, основываясь на этом, и обновлять имя на основе выбора, используя useState. Всякий раз, когда вы делаете выбор, он попадает в родительский компонент, выполняет обновление и возвращает значение дочернему компоненту. Надеюсь, я объяснил, как вы ожидали.

Вот рабочий код ссылка .

Если у вас есть какие-либо вопросы, оставьте комментарий:) 

    import React, {useState} from 'react';

    const DropDownCard = ({name, list, selectedValue, onChange}) => {

      const onSelectChange = event => {
        const { value } = event.target;
        const { name } = list.find(val => val.id == value);
        onChange({id: value, name});
      };

        return (
          <div>
            <h1>Card {name}</h1>
            <select onChange={onSelectChange} value={selectedValue}>
             {
               list.map(name => <option
                key={name.id}
                value={name.id}
                label={name.name}
              />)
             }

            </select>
          </div>
        )
    }

    const cardList = [
      {name:'', selectedValue: null},
      {name:'', selectedValue: null},
      {name:'', selectedValue: null},
    ];

    const Home = () => {
      const [hea, setHea] = useState(cardList);
      const list = [
        {name: "select name", id: ''},
        {name: "Name 1", id: 1},
        {name: "Name 2", id: 2}
      ];

      const onCardNameSelect = (info, index) => {
        setHea(prevState => {
          const {id, name} = info;
          prevState[index].selectedValue = id;
          prevState[index].name = name;
          return [...prevState];
        });
      };

      return(
        <>
          <div>Hello</div>
          {hea.map((val,i) => <DropDownCard  key={"dropDown"+Math.random()}
            name={val.name}
            selectedValue={val.selectedValue}
            list = {list}
            onChange = {event => onCardNameSelect(event, i)}
          />)}
        </>

      )
    };
    export default Home;
...