Question

我对React非常陌生，而且我真的在努力重置＆＃34;重置＆＃34;成功提交AJAX后的表格。请注意，没有Redux。提交后值/ set不会重置为空，并且按钮（我想在提交成功后禁用）也不会被禁用。

我使用React-Formal进行验证，这或许打破了通常的＆＃34; onSubmit＆＃34;表单的行为，因为表单使用自定义<Form>标记。

我试过绑定一个 {AJ}表单.bind(this)并使用this.setState对象禁用输入和按钮，为按钮和类似方法设置所有输入value : ''和disabled: true，但React确实如此无法识别AJAX函数中的setState函数，即使我在AJAX范围之外的成功内部调用另一个函数。

请注意，我为每个输入设置了单独的onChange行为，因为设置一对一功能不起作用，可能是因为验证。

如果你能帮助我，我真的很感激，因为我已经挣扎了好几天，似乎什么都没有用。我想使用React，但如果它不起作用，我必须禁用JQuery按钮，这是我想避免的。

感谢您的帮助！这是代码：

import React, { Component } from 'react';
import Form from 'react-formal';
import Yup from 'yup';
import $ from 'jquery';

var modelSchema = Yup.object({

  firstname: Yup.string().required('First name is required'),
  lastname: Yup.string().required('Last name is required'),
  phone: Yup.string().min(6, 'Phone is too short'),
  phone: Yup.string().matches(/^[\+0-9\-_\/]+$/, 'Phone is not valid'),
  phone: Yup.string().required('Phone is required')

});

var formData = {};

class FormStep1 extends Component {
    constructor(props) {
      super(props);

      this.state = {
       firstname: '',
       lastname: '',
       phone: '',
       disabled: false
      }

      this.handlePhoneChange = this.handlePhoneChange.bind(this);
      this.handleFirstNameChange = this.handleFirstNameChange.bind(this);
      this.handleLastNameChange = this.handleLastNameChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }

   handlePhoneChange(value) {
        this.setState({phone: value});
    }

   handleFirstNameChange(value) {
        this.setState({firstname: value});
    } 

   handleLastNameChange(value) {
        this.setState({lastname: value});
    }

   handleSubmit(e, message) {

    formData = {
        phone: this.state.phone,
        firstname: this.state.firstname,
        lastname: this.state.lastname
    }

    $.ajax({
        url: //some URL,
        headers: {
            //some header
        },
        dataType: 'json',
        type: 'POST',
        data: JSON.stringify(formData),
        success: function () {
            this.setState({
                firstname: '',
                lastname: '',
                phone: '',
                disabled: true
            })
        }.bind(this),
        error: function(xhr, status, err) {
            alert('Error');
        }
    })

  }



  render() {
    return (
      <Form role="form" schema={modelSchema} id="phoneForm" onSubmit={this.handleSubmit} className='row'>
        <div className='form-group'>
          <label htmlFor="phone">Phone</label><br />
          <Form.Field id="phone" className="form-control" placeholder="Phone" onChange={this.handlePhoneChange} name="phone" value={this.state.phone} />
          <Form.Message for='phone'/>
        </div>

        <div className='form-group'>
          <label htmlFor="firstname">Name</label><br />
          <Form.Field id="firstname" className="form-control" placeholder="Last Name" onChange={this.handleFirstNameChange} name="firstname" value={this.state.firstname} />
          <Form.Message for='firstname'/>
        </div>

        <div className='form-group'>
          <label htmlFor="lastname">&nbsp;</label><br />
          <Form.Field id="lastname" className="form-control" placeholder="Last Name" onChange={this.handleLastNameChange} name="lastname" value={this.state.lastname} />
          <Form.Message for='lastname'/>
        </div>

        <Form.Button className="btn btn-green btn-block" disabled={this.state.disabled} type="submit">Submit</Form.Button>            
      </Form>
    );
  }
}

export default FormStep1;

更新：为AJAX成功添加了正确的.bind(this)。现在提交后，该按钮被正确禁用。但输入字段仍显示我单击按钮后提交的值。他们没有重置。

Answer 1

您没有绑定实际重置输入的ajax成功方法

handleSubmit(e, message) {
    e.preventDefault();
    formData = {
        phone: this.state.phone,
        firstname: this.state.firstname,
        lastname: this.state.lastname
    }

    $.ajax({
        url: //some URL,
        headers: {
            //some header
        },
        dataType: 'json',
        type: 'POST',
        data: JSON.stringify(formData),
        success: function () {
            this.setState({
                firstname: '',
                lastname: '',
                phone: '',
                disabled: true
            })
        }.bind(this),
        error: function(xhr, status, err) {
            alert('Error');
        }.bind(this)
    })

  }

另外，为了改进您的代码，您不需要为所有输入单独的处理程序

请参阅以下答案：Is there a neater way to connect an input field to a state property in React than onChange?和Single handler on multiple listener on react

React-Formal onSubmit表单不重置/设置状态

1 个答案: