浏览器不保存字段值，即提交表单时浏览器自动填充设置（chrome）中的地址

Question

我在 react.js 中创建了一个带有以下代码的注册表单，它工作正常，但我想更改表单提交，而不是在锚标记上编写事件以保存表单 我们可以使用 React-Form 提交表单吗？或者如何使用 React 表单来保存字段。

下面是我的代码 sn-p -

<form className="clearfix" name = "signup" id = "signup" method = "post" encType="multipart/form-data" onSubmit = {this.signupUser} autoComplete = "on">
    <input autocomplete="given-name" name="firstName" type="text"  placeholder="Enter First Name" class="form-control" value="">
    <input autocomplete="family-name" name="lastName" type="text" placeholder="Enter Last Name" class="form-control" value="">
    <input autocomplete="email" name="email" type="text" placeholder="Enter Email" class="form-control" value=""> 
    <input autocomplete="tel" name="phoneNumber" type="text" placeholder="Enter Number" class="form-control contactMask" value="">
    <input autocomplete="address-line1" name="addressLine1" type="text" placeholder="Street 1" class="form-control">
    <input autocomplete="address-line2" name="addressLine2" type="text" placeholder="Street 2" class="form-control" value="">
    <button className="btn baseBtn primeBtn" value = "Post" type = "submit">Sign Up</button>
</form>

下面是 react onSubmit 函数：-

   signupUser: function() {
    this.setState({
        signUpError: ''
    });
    if (!this.validateAll() || this.isApiInProgress) {
        return;
    }
    this.isApiInProgress = true;
    UserStore.userSignup(this.params).then(function() {
      this.transitionTo('signupSuccess');
    }.bind(this), function(errorMessage) {
        this.isApiInProgress = false;
        this.setState({
            signUpError: errorMessage
        });
    }.bind(this));
},

点击注册后，浏览器应该保存表单并且还应该保存浏览器自动填充中的值。目前它没有在浏览器自动填充中保存字段值。

Answer 1

根据this documentation，它可以与您需要在 React 类中实现的onSubmit 函数一起使用。

要保存您的字段内容，您可以将它们添加到组件状态，例如onBlur。 handleBlur 函数将调用 this.setState 将信息添加到组件状态，并通过 this.state 将其拉出并插入到渲染方法中的字段中。