无法更改输入标签的值

Question

So I'm trying to set the default value of input tag to a state but when I do so I'm unable to change anything in the input tag, The text just gets stuck, Here is an example of my code:

function RandomScreen(){
    const [State, SetState] = useState()
    // Make API call to set the state
    const inputValue = State
    return(
        <input onChange={handleState} value={inputValue} />
    )
}

I'm using onChange but did not want to include it to reduce noise and to minimize code.

Answer 1

You need onChange function to change value of input

Try something like below:-

function RandomScreen(){
    const [inputState, setInputState] = useState('');
   
    return(
        <input value={inputState} onChange={(e) => setInputState(e.target.value)}/>
    )
}

Answer 2

You are not seeing the changes in Input because you are making the input controlled and not updating the state.

Try doing this:

function RandomScreen(){
    const [input, setInput] = useState();
    const onChange = e => {
      // call API here
    setInput(e.target.value)
    }

    return(
        <input value={input} onChange={onChange} />
    )
}

Read more about controlled components here: https://reactjs.org/docs/forms.html#controlled-components

For making API call you can also take use of useEffect hook.

Answer 3

You have to write an event handler called onChange which will update the state as you type. Here is a slightly changed and updated code -

function RandomScreen(){
const [inputValue, setInputValue] = useState('')
// Make API call to set the state
return(
    <input value={inputValue} onChange={(event) => setInputValue(event.target.value)} />
)

}