Question

我正在使用reactjs中的向导表单，表单工作正常，但是有时当我单击上一个按钮并再次将数据提交到控制台但第一次尝试时，当我单击下一个按钮数据没有到达控制台时数据没有进入我的控制台，它给我空消息，请检查并帮助我。谢谢

表格代码

我使用（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;

Answer 1

查看上面的评论，似乎您在调用this.state之后立即将this.setState登录到控制台。调用this.state之后，您不能立即可靠地检查this.setState的值。 this.setState是异步的，您将获得旧的状态值。如果要在状态更新完成后记录该值，则this.setState的第二个参数接受状态更新完成时要运行的回调函数。例如：

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

您可以在setState here上的官方React文档中了解有关此行为的更多信息。

请在我的ReactJs表单中找到问题，它不起作用

1 个答案: