started learning React js. I made a component so that it was output and so that when I entered into the input I would run the js function.

Code:

class Lable extends React.Component { render() { return ( <input type="text" id={this.props.id} placeholder="&nbsp;" onChange={this.handleChange.bind(this)} /> ); } handleChange(e) { this.props.onSearch(e.target.id); } } ReactDOM.render( <p className="inp"> <label> <Lable name="1" id="roadFrom" onSearch={search} /> <span className="label" /> <span className="border" /> </label> </p>, document.getElementById("root") );

And a piece of the search function code, it performs an auto-complete imput, that is, I enter the first letters and it displays a list, etc., a live search.

 function search(name) { var field = document.getElementById(name); var classInactive = "sf_inactive"; var classActive = "sf_active"; var classText = "sf_text"; var classSuggestion = "sf_suggestion"; field.c = field.className; field.className = field.c + " " + classInactive; field.onfocus = function() { this.className = this.c + " " + classActive; this.value = this.value == "" ? "" : this.value; }; field.onblur = function() { this.className = this.value != "" ? this.c + " " + classText : this.c + " " + classInactive; this.value = this.value != "" ? this.value : ""; clearList(); }; if (suggestion) { var selectedIndex = 0; field.setAttribute("autocomplete", "off"); var div = document.createElement("div"); var list = document.createElement("ul"); list.style.display = "none"; div.className = classSuggestion; list.style.width = field.offsetWidth + "px"; div.appendChild(list); field.parentNode.appendChild(div); }

I naturally cut it, so as not to litter. My problem is that when I enter a character in an input, my list drops out, the class to the "sf_inactive" input is glued, but when I enter the second character, my div is not overwritten but a new one is pasted, naturally the old one hangs behind me. and the class "sf_inactive" is again glued to the input

This is what happens:

 <input type="text" id="roadFrom" placeholder="&nbsp;" class=" sf_inactive sf_inactive sf_inactive sf_text" autocomplete="off">

Here I have here already three times sf_inactive sf_inactive sf_inactive, since three crashes clicked on the button and three divs are glued

 <div class="sf_suggestion"><ul tabindex="-1" style="display: block; width: 280px;"><li><a href="javascript:void(0);">sfsf</a></li></ul></div> <div class="sf_suggestion"><ul tabindex="-1" style="display: block; width: 280px;"><li><a href="javascript:void(0);">sfsf</a></li></ul></div> <div class="sf_suggestion"><ul tabindex="-1" style="display: block; width: 280px;"><li><a href="javascript:void(0);">sfsf</a></li></ul></div>

If this is done not through react, but simply on the page, then everything works correctly, one class is added, and one div that is constantly changing.

How can react fix this? :(

  • In general, it is not clear why you need the reactor if it is stupidly a wrapper over the input, and the main code is executed "outside" the reactor and operates with the dom elements of the tree directly via appendChild . So, you are creating a new element, and where is the old one removed? - Misha Saidov
  • It is purely for learning to understand the essence of the react. The div itself is cleared below, I did not bring it out, that clears the list. Just the question is, why is he below the diva glues new in react'e? Is this some special behavior of the reactor? Or how? Or you need to reload it after each keystroke. - Vladislav
  • * Before each press, clean and then immediately add a new one. Ideally, keep these prompts in state and change state after each click. The problem is not in the reactor, but the search function - Misha Saidov
  • Well, I think that it is necessary to clean up before. In general, in itself, why this behavior is not clear? Why does he add a property re and a new div? Without reactor works corectally. There is a link to the codepen - Vladislav
  • @MishaSaidov I understood what was happening, in React, when I press a key, the js script starts again. And if you simply call it on an element, then it starts up and the internal part is already running, allowing you to enter data by loading the response. This is the console.log I put in the beginning, and in the react it was executed with each press - Vladislav

0