is there a way to do something similar to document.getelementbyid() in this situation-CodePudding

I am working on a project where i try to implement a search function. My first step is to make sure that all input is set to lower case to make SQL calls easier. However i have stumbled upon a problem that i am struggling to fix. I do not know how to do a document.getElementById('') in react typescript. I am quite new to these languages and have tried the solutions found here (How to do something like document.getElementById().value in typescript?) but this does not seem to get the data stored in my element.

So im wondering how can i get the input in the searchbar into the variable defaultText.

here is the element that i want to grab

<Row><input type="search" id="form1" onChange={this.input} placeholder="Søk etter oppskrift.."/></Row>

here is the function which i attempt to set the input to lower case

  input(){
    const defaultText:string = (document.getElementById('form1') as HTMLInputElement).value;
    console.log (defaultText);
      // To convert Lower Case
      let lowerCaseText = defaultText.toLowerCase();
      console.log(lowerCaseText);
    
  }

The outcome from both 'console.log' is simply an empty row

CodePudding user response：

You don't need to use native javascript selectors for this. You can just use the onChange method, first parameter will give you the ChangeEvent for the input change. You can get the value simply by event.target.value (assuming the parameter is taken as event).

Furthermore you can save this value to the state using useState.

See the changed code.

  const [inputValue, setInputValue] = useState("");      

  function onChange(event: React.ChangeEvent<HTMLInputElement>){
    const defaultText:string = event.target.value;
    // To convert Lower Case
    let lowerCaseText = defaultText.toLowerCase();
    
    // You can either save lowerCaseText or defaultText here
    setInputValue(defaultText):
    
  } 


 <Row><input type="search" id="form1" onChange={onChange} placeholder="Søk etter oppskrift.." value={inputValue}/></Row>

CodePudding user response：

You should use state, it will be the best way to handle it, and it's "the React way"
See React Docs

Higher up in the component you will need to declare the initial value of your input:

const [inputValue, setInputValue] = React.useState("");

// In typescript you can also do the following: 
// const [inputValue, setInputValue] = React.useState<string>("");

Later on you will need to use the state, as well as manage when it is updated:

<Row>
  <input
    type="search"
    id="form1"
    value={inputValue}
    onChange={(event) => {
      setInputValue(event.target.value)
    }}
    placeholder="Søk etter oppskrift.."
    />
</Row>

CodePudding user response：

Converting my comment to an answer to give an example.

You should use an useState to remember the value of the input. Set it using value. Then in your onChange function, set it to lower before calling the set function.

Demo without typescript:

const { useState, useEffect } = React; 

function App() {
  const [value, setValue] = useState('');

  const onInputValue = (e) => {
    setValue(e.target.value.toLowerCase())
  };

  return (
    <input type="search" value={value} id="form1" onChange={onInputValue} placeholder="Søk etter oppskrift.."/>
  );
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>