Пожалуйста, найдите проблему в моей форме ReactJs, она не работает - PullRequest
Новая
       9

Пожалуйста, найдите проблему в моей форме ReactJs, она не работает

0 голосов
/ 24 ноября 2018

Я работаю над формой Мастера в реагировании, форма работает нормально, но иногда, когда я нажимаю на следующую кнопку, данные не поступают на мою консоль, когда я нажимаю на предыдущую кнопку и снова отправляю данные на консоль, но с первой попытки.данные не приходят на мою консоль, и это дает мне нулевое сообщение, пожалуйста, проверьте это и помогите мне.Спасибо

Код формы

Я использовал эту форму от (Ant-design) 

import React from 'react';
import styled from 'styled-components';
import 'antd/dist/antd.css';
import './FirstStep.css';
import { Form, Input } from 'antd';

const FormItem = Form.Item;
const FormCard = styled.div`
  max-width: 100%;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.41, 0.094, 0.54, 0.07) 0s;
  margin-top: 30px;
`;

    class RegisterStepOne extends React.Component {
      handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values.toString());
          }
        });
      };
      render() {
        const { getFieldDecorator } = this.props;
        return (
          <div>
            <FormCard>
              <Form onSubmit={this.handleSubmit} className="login-form">
                <FormItem>
                  {getFieldDecorator('firstName', {
                    rules: [
                      {
                        required: true,
                        message: 'Please input your First name!',
                        whitespace: true,
                      },
                    ],
                  })(<Input placeholder="First name" />)}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('lastName', {
                    rules: [
                      {
                        required: true,
                        message: 'Please input your Last name!',
                        whitespace: true,
                      },
                    ],
                  })(<Input placeholder="Last name" />)}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('email', {
                    rules: [
                      {
                        type: 'email',
                        message: 'The input is not valid E-mail!',
                      },
                      {
                        required: true,
                        message: 'Please input your E-mail!',
                      },
                    ],
                  })(<Input placeholder="Email" />)}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('lastPosition', {
                    rules: [
                      {
                        required: true,
                        message: 'Please input your Last Position!',
                        whitespace: true,
                      },
                    ],
                  })(<Input placeholder="Present or last position" />)}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('lastCompany', {
                    rules: [
                      {
                        required: true,
                        message: 'Please input your Last Company!',
                        whitespace: true,
                      },
                    ],
                  })(<Input placeholder="Present or last Company" />)}
                </FormItem>
              </Form>
            </FormCard>
          </div>
        );
      }
    }
    export default RegisterStepOne;

1 Ответ

0 голосов
/ 24 ноября 2018

Глядя на ваш комментарий выше, похоже, что вы регистрируете this.state на консоли сразу после вызова this.setState.Вы не можете надежно проверить значение this.state сразу после вызова this.setState.this.setState является асинхронным, и вы получите старое значение состояния.Если вы хотите записать значение после завершения обновления состояния, существует второй аргумент this.setState, который принимает функцию обратного вызова, которая запускается после завершения обновления состояния.Например: 

this.setState({ user: { ...values } }, () => console.log(this.state.user));

Подробнее об этом поведении вы можете прочитать в официальной документации React для setState здесь .

...