React js - 在 Ant 设计步骤中保存以前的值答案

【问题标题】：React js - Save previous value in Ant Design StepsReact js - 在 Ant 设计步骤中保存以前的值
【发布时间】：2020-01-31 18:39:34
【问题描述】：

我正在为我的表单使用 Ant Design Steps，但在如何保存之前输入的值时遇到问题。

这是我的代码完整代码：

import React from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Icon, Input, Button, Steps } from 'antd';

const { Step } = Steps;

const steps = [
  {
    title: 'First',
    content: 'First-content',
  },
  {
    title: 'Second',
    content: 'Second-content',
  }
];

class NormalLoginForm extends React.Component {
  constructor (props) {
    super (props) ;
    this.state = {
      current:  0
    }
  }

  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }

  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  render() {
    const { current } = this.state
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
      <Steps current={current}>
      {steps.map(item => (
        <Step key={item.title} title={item.title} />
      ))}
    </Steps>
      <Form onSubmit={this.handleSubmit} className="login-form">
      {current === 0 ? (
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
            />,
          )}
        </Form.Item>
      ): ''}
      {current === 1 ? (
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="Password"
            />,
          )}
        </Form.Item>
        ): ''}
      </Form>
          {current < steps.length - 1 && (
            <Button type="primary" onClick={() => this.next()}>
              Next
            </Button>
          )}
          {current === steps.length - 1 && (
            <Button type="primary" onClick={this.handleSubmit}>
              Done
            </Button>
          )}
          {current > 0 && (
            <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
              Previous
            </Button>
          )}
      </div>
    );
  }
}

发生的事情是当我单击下一步时，前一个输入的值消失了。我想要发生的是，当我单击下一步时，前一个值将被保存，因此当我单击提交时，两个值都将在控制台中输出。代码来自ant design，我用过的例子

【问题讨论】：

标签： reactjs antd

【解决方案1】：

您应该考虑将数据存储在一个状态中：

 constructor (props) {
    super (props) ;
    this.state = {
      current:  0,
      firstInput: '',
      secondInput: '',
    }
  }

 <Input
   prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
   placeholder="Username"
   onChange={(e) => this.setState({firstInput: e.target.value})}
 />,

然后，在您的提交新闻中，您将能够通过执行this.state.firstInput 和this.state.secondInput 来访问firstInput 和secondInput 的值。

【讨论】：