In my text box, when I type 123 and edit as 1-23, I need to trigger a separate api call

Question

In my text box, when I type 123 and edit as 1-23, I need to trigger a separate api call and for 123 I need to do separate api call, but right now its capturing the onChange api call. when ever I enter dash between numbers I should call another api, but its calling the same api in on change

I found this links but nothing helping me How to get old Value with onchange() event in text box

Can you tell me how to fix it?

I'm providing my code snippet and sandbox below. All my code is present inside Button.js which is inside the containers folder:

https://codesandbox.io/s/sad-ardinghelli-zvco8

function useHackerNews(props) {
  const channel = useSelector(state => state.channel);

  const dispatch = useDispatch();

  const getPosts = channel => dispatch(fetchPosts(channel));
  const getAlert = () => dispatch(displayAlert());

  document.onmouseup = () => {
    console.log(window.getSelection().toString());
  };

  const onKeyDown = e => {
    console.log("e.keyCode", e.keyCode);

    if (e.keyCode === 8) {
      console.log("delete---->", e.target.value);
      getPosts(channel);
      if (e.target.value === "") {
        console.log("onKeyDown delete empty value--->", e.target.value);
        fetchSearch(channel);
      }
    }
  };
  const onMouseUp = e => {
    console.log("onMouseUp e.keyCode", e.keyCode);
    if (window.getSelection().toString().length > 0) return;

    if (e.target.value === "") {
      console.log("onMouseUp delete empty value--->", e.target.value);
      fetchSearch(channel);
    }
  };

  return (
    <div>

      <InputBase
        // className={classes.input}
        placeholder="Search Google Maps"
        inputProps={{ "aria-label": "Search Google Maps" }}
        onChange={e => {
          if (e.target.value == "") {
            return;
          }

          console.log("onChange e.target.value--->", e.target.value);
          getPosts(channel);
        }}
        onKeyDown={() => {
          // getPosts(channel);
          onKeyDown();
        }}
        onMouseUp={() => {
          // getPosts(channel);
          onMouseUp();
        }}

        //onKeyDown={onKeyDown}
        //   onMouseUp={this.onMouseUp}
      />
    </div>
  );
}

... fix what? Can you please be more clear? What all this code does? Why what it does is wrong? — M. Prokhorov, Sep 02 '19 at 13:18
@M.Prokhorov when ever I enter dash between numbers I should call another api, but its calling the same api in on change :( — , Sep 02 '19 at 13:45
That'd be because you never check whether the entered value has dashes or not. What have you tried to solve your problem? Also, an improved [mcve] would be really helpful, instead of basically a full app that you've linked here. — M. Prokhorov, Sep 02 '19 at 13:49

score 0 · Accepted Answer · answered Sep 02 '19 at 14:58

If I understand what you need, the solution is here -> https://codepen.io/thyago-luciano/pen/BaBwQBz

HTML

<div>
  <input type="text" ></input>
</div>

JS

// variables
var input = document.querySelector("input");

// events
input.onkeyup = function(e) {
  const value = this.value
  if (value.includes("-")) {
    console.log(`call rest API 1 to ${value}`)
    // redirect to API 1
  } else {
    // redirect to API 2
    console.log(`call rest API 2 to ${value}`)
  }
};

In my text box, when I type 123 and edit as 1-23, I need to trigger a separate api call

1 Answers1