Question

我尝试为基于电子邮件的输入实施一些验证。它主要在那里，但我遇到了一个奇怪的状况。

我正在淘汰onChange函数，其中包括一些验证并在提交时再次验证。如果用户在去抖动之前提交无效字符串，则提交函数将捕获它并将组件状态设置为无效，但只有在去抖动命中时，此时去抖动将状态设置回有效，因为它看起来像表单提交正在清除输入字段的基础值。我的提交函数中有一个preventDefault，但似乎每当触发提交函数时，event.target都会被清空。我想保持event.target/input值同步。这是我的代码：

import React from 'react';
import {Link} from 'react-router';
import _ from 'underscore';
import classNames from 'classnames';

class Search extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isValid: true
        };
        this.validateOnChange = _.debounce(this.validateOnChange,500).bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.validateEmail = this.validateEmail.bind(this);
    }


    handleSubmit(event) {
        event.preventDefault();

        if(this.validateEmail(event.target[0].value)){
            $.ajax({
                url: '/api/search?email=' + event.target[0].value
            })
            .done((data) => {
                this.props.getNewImage(data, false);
            })
            .fail(() => {
                this.props.getNewImage('/img/obi.gif', true);
            });
        }else {
            this.setState({isValid: false});
        }
   }

   validateOnChange(event){
       this.setState({isValid: (event.target.value ? this.validateEmail(event.target.value) : true)});
    }

    validateEmail(input){
        var re;
        re = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|gov|mil|biz|info|mobi|name|aero|jobs|museum)\b/i;

        return re.test(input);
    }

    render() {
        var classes = classNames({
            'form-control': true,
            'valid': this.state.isValid,
            'invalid': this.state.isValid === false
        });
        return(
            <form ref='searchForm' className='navbar-form navbar-left animated' onSubmit={this.handleSubmit.bind(this)}>
                <div className='input-group'>
                    <input type='text' className={classes} placeholder="Enter Email!" onChange={this.validateOnChange.bind(this)} />
                  <span className='input-group-btn'>
                      <button className='btn btn-default' type="submit"><span className='glyphicon glyphicon-search'></span>Search</button>
                  </span>
                </div>
                {this.state.isValid ? null : <span className="invalid-text">Invalid Email Address</span> }
            </form>
        );
    }
}

export default Search;

Answer 1

您可以使用linkState react/linkState来处理输入元素的onChange事件。

<input
   min="1"
   max="10"
   type="number"
   className="form-control"
   valueLink={linkState(this, 'qty')} />

React - 输入值在提交时清除

1 个答案: