Как получить доступ ко второй странице в реакции - PullRequest
0 голосов
/ 03 декабря 2018

В настоящее время я работаю над формой мастера в реактивах.У нас есть 4 страницы формы (шаг 1, шаг 2, шаг 3 и шаг 4).Файл Wizard.js включается на каждом этапе.Я создал логику для них в операторе switch.

Первый шаг успешно продолжается.Когда я нажимаю кнопку «Далее», на шаге 2 ничего не происходит.

Код Wizard.js

  this.state = {
  current: 1,
};

switch (this.state.current) {
      case 0:
        // code run for step 1
        fetch('..../api/auth/createuser', {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            user: userOject,
          }),
        })
          .then(response => response.json())
          .then(createUserRes => {
            if (createUserRes.error) {
              console.warn(createUserRes);
            } else if (createUserRes && createUserRes.user) {
              info();
              console.warn(createUserRes);
              localStorage.setItem(
                'user',
                JSON.stringify(createUserRes.user),
              );
              const modifier = {
                id: createUserRes.user._id,
                type: createUserRes.user.profile.type,
                profile: {
                  fullName: values.fullName,
                  position: values.lastPosition,
                  username: values.username,
                  location: values.lastPosition,
                  company: values.lastCompany,
                  photo: '',
                  screen: 'Step1',
                },
              };
              fetch(`...../api/auth/user/update`, {
                method: 'POST',
                headers: {
                  Accept: 'application/json',
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                  id: createUserRes.user._id,
                  modifier,
                }),
              })
                .then(response => response.json())
                .then(res => {
                  if (res.error) {
                    console.warn(res);
                  } else {
                    console.warn(res);
                    this.next();
                  }
                })
                .done();
            }
          });
        break;
      case 1:
        // code run for step 2
        this.handleUpload = e => {
          const reader = new FileReader();
          const storeUser = JSON.parse(localStorage.getItem('user'));
          reader.onload = function(upload) {
            fetch(`....../api/s3/uploadtoaws`, {
              headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
              },
              method: 'POST',
              body: JSON.stringify({
                userId: storeUser._id,
                type: 'employee',
                content: upload.target.result,
                key: 'e.file.name',
                oldKey: '',
              }),
            })
              .then(response => response.json())
              .then(res => {
                console.warn(res);
                this.next();
              })
              .done();
          };

          reader.readAsDataURL(e.file.originFileObj);
        };
        break;
      case 2:
        // code run for step 3
        break;
      case 3:
        // code run for step 4
        fetch(`...../api/auth/user/updateskills`, {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            id: user._id,
            type: user.profile.type,
            modifier: {
              'profile.skills': values.skills,
            },
          }),
        })
          .then(response => response.json())
          .then(res => {
            if (res.error) {
              console.warn(res);
            } else {
              console.warn(res);
              // this.afterDone();
              this.next();
            }
          })
          .done();
        break;
      default:
    }

Код Step2

<Form onSubmit={this.handleSubmit}>
    <FormItem>
        {getFieldDecorator('picture', {
        rules: [
        {
        required: true,
        message: 'Please upload picture!',
        },
        ],
        })(
        <Upload onChange={this.handleUpload}>
            <Button>
                <Icon type="upload"/>
                Click to Upload
            </Button>
        </Upload>
        ,
        )}
    </FormItem>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...