Ввод файла с использованием React Final Form и многостраничного мастера

У меня проблемы с передачей реквизита формы до ее дочерних компонентов.

Я хотел бы получить доступ к props.change ()

https://codesandbox.io/s/53ow5yyv2k

В Wizard.js я передаю реквизиты объекта компоненту Form.

render() {
const { children } = this.props;
const { page, values } = this.state;
const activePage = React.Children.toArray(children)[page];
const isLastPage = page === React.Children.count(children) - 1;
return (
  <Form
    initialValues={values}
    validate={this.validate}
    onSubmit={this.handleSubmit}
  >
    {({ handleSubmit, submitting, values, props }) => (
      <form onSubmit={handleSubmit} formProps={props}>
        {activePage}
        <div className="buttons">
          {page > 0 && (
            <button type="button" onClick={this.previous}>
              « Previous
            </button>
          )}
          {!isLastPage && <button type="submit">Next »</button>}
          {isLastPage && (
            <button type="submit" disabled={submitting}>
              Submit
            </button>
          )}
        </div>

        <pre>{JSON.stringify(values, 0, 2)}</pre>
      </form>
    )}
  </Form>
);
}

В индексе я пытаюсь получить доступ к этому formProps obj, но я не уверен, откуда получить к нему доступ.

const App = () => (
  <Styles>
    <Form
      onSubmit={onSubmit}
      validate={validateRecord}
      validateOnBlur={true}
      render={props => {
        return (
          <form onSubmit={props.handleSubmit}>
            <Field name={`company`}>
              {({ input, meta }) => (
                <div>
                  <label>Company</label>
                  <input {...input} type="text" placeholder="Company" />
                </div>
              )}
            </Field>
            <Field name={`logo`}>
              {fieldprops => (
                <div>
                  <label>Logo</label>
                  <input
                    type="file"
                    accept="image/*"
                    onChange={e => {
                      console.log(e.target.files[0]);
                      props.change(e.target.value);
                      // props.change(e.target.files[0]);
                    }}
                  />
                  <pre>{JSON.stringify(fieldprops, 0, 2)}</pre>
                </div>
              )}
            </Field>
            <div className="buttons">
              <button
                type="submit"
                disabled={props.submitting || props.pristine}
              >
                Submit
              </button>
            </div>
            <pre>{JSON.stringify(props, 0, 2)}</pre>
          </form>
        );
      }}
    />
  </Styles>
);

Есть идеи?

0 ответов

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