在 onChange 事件后反应输入元素重新呈现

Question

I have a input element that is changed when the user inputs some value:

const[elem, setElem]=useState("");

const handleChangeElem = (event) => {
    setElem(event.value);
...
 <Input onChange={handleChangeElem}/>
}

So, when user writes, for examle, 'test1' the elem state should be 'test1'. But the thing is, after I write 1 letter, the whole component re-renders, and the input is empty. The elem state is not mentioned anywhere else (useeffect or smth like that) so I don't know why it keeps re-rendering. Help anyone?

my whole component:

import { useTheme } from '@mui/material/styles';
import { process } from "@progress/kendo-data-query";
import { Button } from '@progress/kendo-react-buttons';
import { Grid, GridColumn } from "@progress/kendo-react-grid";
import '@progress/kendo-theme-default/dist/all.css';
import React, { useEffect, useState } from 'react';
import { GiJumpAcross } from 'react-icons/gi';
import { BiRefresh } from 'react-icons/bi';
import { useNavigate } from "react-router-dom";
import services from '../../services';
import { FaTrash, FaDownload, FaUpload } from 'react-icons/fa';
import { FcCancel } from 'react-icons/fc';
import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
import { Input } from '@progress/kendo-react-inputs';
import { GiCancel } from 'react-icons/gi';
import { AiFillFileAdd } from 'react-icons/ai';
import { useDispatch, useSelector } from "react-redux";

export default  function Sesije ({state}) {
  const toggleDialog = () => {
      setVisible(!visible);
    };

  const toggleDialogPrilog = () => {
    setVisible2(!visible2);
  }


  const storno = (nServisnaId, vKorisnikId, vStornoSustav) => {
    (async() => {
      const resp = await services.stornoSession(nServisnaId, vKorisnikId, napomena,vStornoSustav,razlog);
      alert(resp.data.vporuka);
    })();
}

const handleChangeRazlog = (event) => {
    setRazlog(event.value);
    console.log(event);
}

const handleChangeNapomena = (event) => {
    setNapomena(event.value);
}

  const MyCommandCell = (props) => {
      const {
        dataItem
      } = props;

      return <td className="k-command-cell">
        <div style={{marginTop:'2%'}}>
          
          <Button style={{width:'8vw',marginTop:'2%'}}
          onClick={toggleDialog}>
           <FcCancel/> Storniraj
          </Button>
          </div>
          { visible && <Dialog onClose={toggleDialog} title={"Storniranje sesije"}>
            <DialogActionsBar>
            <div style={{marginTop:'2%'}}>Razlog storna:</div>
            <Input name="razlog" onChange={handleChangeRazlog} style={{marginTop:'2%'}}/>
            <div style={{marginTop:'2%'}}>Napomena:</div>
            <Input value={bzvz} onChange={handleChangeNapomena} style={{marginTop:'2%'}}/>
            <Button 
            onClick={toggleDialog}>
            <GiCancel/> Odustani
            </Button>
            <Button 
            onClick={()=>storno(props.dataItem.sn_zag_id, currentUser.userName, stornoSus)}>
            <FaTrash/> Izbriši servisnu
            </Button>
            </DialogActionsBar>
          </Dialog>}
       
          </td>;

Answer 1

  const[elem, setElem]=useState("");
        
        const handleChangeElem = (event) => {
            setElem(event.value);
        ...
  }
  <Input value={elem} onChange={(e)=>handleChangeElem(e)}/>
        

Answer 2

when you trigger a state update you re-render the view. if the component is not depending on your state it will re-render in its vanilla state.

supplying value={elem} to your Input should fix your problem

Answer 3

replace your input tag with this

<Input value={elem} onChange={handleChangeElem}/>

you can resolve this by just adding a value attribute to your tag.

Answer 4

You can use the useRef hook to perform the work more efficiently

const elem=useRef("");
 <Input ref={elem}/>
}

Then whenever you type anything in the text box, the sentence will be assigned to elem variable.