使用React Final Form和多页向导进行文件输入

Question

我无法将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>
);

有什么想法吗？