React ref.current внутри l oop работает только на первой итерации - PullRequest
Новая
       1

React ref.current внутри l oop работает только на первой итерации

0 голосов
/ 28 мая 2020

У меня есть страница, где файлы с флажками для надписей отображаются с карты. Обычно пользователь затем может выбирать / отменять выбор файлов. Проблема в том, что я хотел добавить функцию, которая позволяет выбирать / отменять выбор всех файлов одним нажатием кнопки. Я пробовал использовать для этого ссылки. 

 const fileRef = React.useRef([]);

Тогда у меня есть простая карта: 

files.map((file, index) => 
    <FormControlLabel 
        ref={el => fileRef.current[index] = el}
        control={...}
        label={file.name}
    />
)

И я попытался создать такую ​​функцию: 

const selectAll = () => {
    for(let i = 0; i < files.length; i++) {
        fileRef.current[i].control.click();
    }
}

Проблема в том, что выбран только первый файл / не выбран. Выбранные файлы хранятся в массиве. Щелчок вручную обрабатывается с помощью простого handleChange, где я устанавливаю флажок с помощью event.target.value, а при отмене выбора я просто использую array.filter.

Если я, например, создаю две кнопки с двумя разными индексами, тогда он работает, но внутри l oop индекс, кажется, не действует.

Есть ли способ выбрать / отменить выбор всех файлов одним щелчком мыши? Я полагаю, что отменить выбор легко, я просто очищаю массив, но выбор кажется проблемой. Ref работает только с первым элементом.

1 Ответ

0 голосов
/ 28 мая 2020

Не используйте ссылку, чтобы пытаться установить все флажки, просто измените состояние файла, чтобы проверить все файлы.

Я предполагаю, что files загружается каким-то вызовом api, и ваш компонент делает что-то вроде 

const [files, setFiles] = useState([])

useEffect(() => {
  loadFiles().then(files => {
    const filesWithCheckParam = files.map(file => ({ ...file, isChecked: false }))
    setFiles(filesWithCheckParam)
  })
}, [])

Теперь вы можете вставить кнопку или другой флажок или что-то еще с обработчик кликов, который изменяет состояние файла, например 

const handleCheckAllClick = checked => {
  setFiles(fs => fs.map(f => ({ ...f, isChecked: checked })))
}
...