reactjs - 如何在 React 中访问 JSX 组件方法？

Question

我正在使用带有 react-final-form 的 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

您需要使用thisand current，请参阅https://reactjs.org/docs/refs-and-the-dom.html#creating-refs

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

Answer 2

你onprocessfiles应该是一个回调。

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

实际上，您正在调用pond.getFiles()第一个渲染，但尚未填充 ref。