Кто-нибудь знает, как реализовать useDropzone Hook, а не (компонент) вместе с окончательной формой реакции

Question

Например,

, если у меня есть

const ImageInput = ({fieldPropsFromFinalForm}) => {
    const { getRootProps, getInputProps, open } = useDropzone({ onDrop, accept: 'image/jpeg, image/png' });
    .
    .
    .
    return (<input {...getInputProps()} {...fieldPropsFromFinalForm} /> )

} 

, такой способ ввода не работает очевидным, но я понятия не имею, как заставить его работать, как обрабатывать их вместе. Я новичок, чтобы реагировать, и я надеюсь, что я не задал неправильный вопрос.

Answer 1

Вы должны вызвать onChange из fieldPropsFromFinalForm в onDrop обратном вызове

. Пожалуйста, найдите эту песочницу, например,

. Пожалуйста, найдите код для <ImageInput/> Компонент

ImageInput

 const ImageInput = props => {
  const onDrop = useCallback(acceptedFiles => {
    // Do something with the files
    props.input.onChange(acceptedFiles);
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: "image/jpeg, image/png"
  });
  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} {...props} />
      {isDragActive ? (
        <p>Drop the files here ...</p>
      ) : (
        <p>Drag 'n' drop some files here, or click to select files</p>
      )}
      {props.input.value
        ? props.input.value.map(file => {
            return <div>{file.path}</div>;
          })
        : null}
    </div>
  );
};

Образец формы

function SampleForm() {
  const onSubmit = values => {
    alert(JSON.stringify(values));
  };
  return (
    <div>
      <Form onSubmit={onSubmit}>
        {props => (
          <form onSubmit={props.handleSubmit}>
            <Field name="myField">
              {props => (
                <div>
                  <ImageInput {...props} />
                </div>
              )}
            </Field>
            <button type="submit">Submit</button>
          </form>
        )}
      </Form>
    </div>
  );
}