从 <input> onChange 函数发送一个函数

Question

我的组件：

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-query。所以我需要将 refetch 函数发送到我的 uploadFile。我该怎么做？

Answer 1

我认为这样做：

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

您正在覆盖 GraphQlDataFetcher 传递的 refetch 方法，您可以尝试这样做吗？

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

Answer 2

0xc14m1z 的回答是正确的。

这是一个 'cleaner' 语法，可以通过预配置您的函数来解决您的问题：

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

还有你的函数：

uploadFile = async refetch => event => {

从 <input> onChange 函数发送一个函数

Sending a function fron <input> onChange function

reactjs

graphql

graphql-js