Question

我正在调试由其他人构建的项目，这是一个奇怪的问题，其中一个表单框无法删除最后一个字符。

代码使用两个JS文件，一个主要使用React，另一个使用jQuery（我听说这是一个遗留项目，外包，其他人只是对它做出反应）。

现在，因为代码长达8000行，所以我调试起来相对困难（特别是当他们将所有内容命名为相同的时候......）。

我想知道是否有人会有任何指针？我检查了状态，我可以看到表单输入的值正在改变（如果单词“hello”在那里，我一直删除到“h”并再次删除，“h”仍然保留在框中，但是“h”从“值”字段和状态中消失。

我怀疑这是一个jQuery问题，但我没有看到任何修改表单输入字段值的内容。

我注意到的另一件事是我无法按CTRL +删除或突出显示所有内容并完全删除（适用于其他框）。

以下是输入的React代码片段。

render: function() {
    if( this.state.theData.length ) {

        return (
            <div id="to-airport-wrapper" className="wrapper">
              <label htmlFor="to-airport" className="clear-inline-block">
                  {LEXICON.to}
                <span className="sr-only">{LEXICON.cityOrAirport}</span>
                <span id="wcag-to-airport" className="sr-only">{LEXICON.wcagFromToAirportLabel}</span>
                <ToAirportLabel hasError={this.state.error}/>
              </label>
              <div id={"TO_LAW_"+this.props.groupIndex} className="list-airport-wrapper">
                  <input type="text" id="to-airport" className="from-to-airport full-width" name="to-airport"
                         onFocus={this.onFocus} onChange={this.change} placeholder={LEXICON.cityOrAirport}
                         aria-required="true" aria-autocomplete="list" autoComplete="off"
                         data-airportcode={this.state.airportcode} value={this.state.value}/>
                <ul data-type="to-airport" className="list-airport list-unstyled">
                    {
                        this.state.data.map(function(item, i) {
                            return <li key={i} className="list-airport-item" data-shortname={item.shortName} data-airportcode={item.airportCode} tabIndex="-1"><span>{item.name}</span></li>
                        })
                    }
                </ul>
              </div>
            </div>
        );

    } else {

        return (
            <div id="to-airport-wrapper" className="wrapper">
              <label htmlFor="to-airport" className="clear-inline-block">{LEXICON.to}</label>
              <div className="list-airport-wrapper">
                <input type="text" id="to-airport" className="from-to-airport full-width" name="to-airport" onChange={this.change} disabled="true" aria-autocomplete="list" data-airportcode="" placeholder={LEXICON.cityOrAirport} autoComplete="off" value="" />
              </div>
            </div>
        );
    }

}

这是更改功能：

  change: function(event) {

    GLOBAL.ToAirportSetAirportCode('', '');

    console.log("TO VALUE!", event.target.value)

    if( event.target.value ) {
        var jsObjects = this.state.theData;
        var result = jsObjects.filter(function( obj ) {
            var airportName = obj.name.replace('(','\\(').replace(')','\\)');
            var eventTargetValue = event.target.value.replace('(','\\(').replace(')','\\)');
            return airportName.toLowerCase().search( eventTargetValue.toLowerCase() ) !== -1;
        });
        if( result.length > 0 ) {
            $("#TO_LAW_"+this.props.groupIndex+ " ul").show();
            this.setState({
                data: result,
                value:event.target.value
            });
        } else {
            this.setState({
                value:event.target.value
            });
            $("#to-airport + ul").hide();
        }
    } else {
        this.setState({
            data: this.state.theData,
            value: event.target.value
        });
    }

    if( event.target.value == "" || result.length == 0 ) {
        this.reset(event.target.value);
    }
}

当我尝试删除表单输入中的最后一个字符时，TO VALUE的console.log过早消失。

无法从输入中删除字符

0 个答案: