Как получить доступ к методу компонента JSX в React?

Question

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

const FileAdapter = ({ input: {value, onChange, ...rest}, pond}) => (
  <FilePond
    ref={pond}
    onprocessfiles={console.log(pond.getFiles())}
    />
)


class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.pond = React.createRef();
  }
    render() {
        return (
            <>
            <Form
              render={) => (
                <form>
                    <Field name="files" pond={this.pond} component={FileAdapter} />
                </form>
              )}
            />
            </>
        );
    }
}

Каждый раз я получаю следующее:

TypeError: Невозможно прочитать свойство 'getFiles'из неопределенного

Answer 1

Ваш onprocessfiles должен быть обратным вызовом.

onprocessfiles={() => console.log(pond.getFiles())}

На самом деле вы звоните pond.getFiles() при первом рендере, а ссылка еще не заполнена.

Answer 2

Вам нужно использовать this и current, см. https://reactjs.org/docs/refs-and-the-dom.html#creating-refs

<FilePond
    ref={ this.pond }
    onprocessfiles={ () => console.log( this.pond.current.getFiles() ) }
    />