Отправка функции из <input> функции onChange

Мой компонент:

class Admin extends React.Component {
  constructor(props) {
    super(props);
  }

  uploadFile = async (event, refetch) => {
    await uploadFileToBucket(event, true);
    refetch(); // refetch is undefined
  };

  render() {
    return (
     <GraphQlDataFetcher query = {getObjectsInDefaultBucket()}>
        {(data, refetch) => (
           <Files files = {data.bucketObjects}/>
            <input type = "file" onChange = {(refetch) => this.uploadFile(event, refetch)}/>

          )}
       </GraphQlDataFetcher>

    );
  }
}


export default Admin

Когда загрузка файла будет завершена, я хочу повторно загрузить запрос graphql. Поэтому мне нужно отправить функцию повторной загрузки на мой uploadFile. Как мне это сделать?

Вход onChange дает вам только событие, но не повторную выборку. Чтобы получить последние данные, выполните вызов fetch, как если бы вы выполняли uploadFileToBucket

Hemadri Dasari 09.01.2019 12:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
44
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я думаю, что делаю это:

<input type = "file" onChange = { (refetch) => this.uploadFile(event, refetch) } />

вы переопределяете метод refetch, переданный GraphQlDataFetcher, можете ли вы попробовать сделать это вместо этого?

<input type = "file" onChange = { event => this.uploadFile(event, refetch) } />

0xc14m1z ответ правильный.

Вот более «чистый» синтаксис для решения вашей проблемы путем предварительной настройки вашей функции:

<input type = "file" onChange = {this.uploadFile(refetch)} />

И ваша функция:

uploadFile = async refetch => event => {

Другие вопросы по теме