Ввод файла с использованием React Final Form и многостраничного мастера - PullRequest
0 голосов
/ 20 февраля 2019

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

Мне нужен доступ к props.change ()

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

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

<code>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)}
)} );}

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

<code>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)}
)} Отправить
{JSON.stringify(props, 0, 2)}
);}} /> );

Есть идеи?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...