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

Question

我有一个输入元素，当用户输入某个值时，它会更改：

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

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

因此，当用户写入审查时，“ test1” elem状态应为'test1'。但是事实是，在我写了1个字母后，整个组件重新租赁，输入为空。在其他任何地方都不会提到Elem状态（这样使用效果或SMTH），所以我不知道为什么它会继续供订阅。帮助任何人？

我的整个组件：

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

您可以使用useref挂钩更有效地执行工作

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

，然后在文本框中输入任何内容，句子都会被分配给 elem 变量。

Answer 2

触发状态更新时，您会重新渲染视图。如果该组件不取决于您的状态，它将在其香草州重新渲染。

向输入提供value = {elem}应解决问题

Answer 3

用此替换输入标签

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

您可以通过在标签中添加值属性来解决此问题。

Answer 4

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