onChange 事件处理程序的刷新问题

Question

我有一个带有 onChange 事件处理程序的输入，每次我尝试在其中键入一些字符时都会刷新屏幕。我想知道你们中是否有人可以帮我解决它。

这是我的代码：

const HeaderUser: React.FC<TabWrapper> = () => {
const [drawerEmpreendimentosVisible, setDrawerEmpreendimentosVisible] = useState(false);
const intl = useIntl().formatMessage;
const [currentEmpreendimento] = useLocalStorage().createState('currentEmpreendimento');

const [displayRoadmapScreen, setDisplayRoadmapScreen] = useState(false)
const [displayRegisterScreen, setDisplayRegisterScreen] = useState(false);
const [inspector, setInspector] = useState('');
const [roadmap, setRoadmap] = useState('');


const RegisterScreen = () => {

    const handleOk = () => {
        setDisplayRegisterScreen(false);
    };

    const handleCancel = () => {
        setDisplayRegisterScreen(false);
    };


    return (
        <div>
           <Modal
                title="Cadastrar novo roteiro"
                visible={displayRegisterScreen}
               onOk={handleOk}
                onCancel={handleCancel}>
                <b>Roteiro:</b>
                <br />
        //Refreshing issue  <Input type="text"  placeholder="Roteiro"  onChange={e => 
                  setRoadmap(e.target.value)} /><br />
                <b>Inspetor:</b>
                <br />
                <Input type="text" name="inspector" placeholder="Inspetor"  onChange={(e) => console.log(e.target.value)} />
            </Modal>
        </div>
    )
};        

Answer 1

可能是因为您在 RegisterScreen 组件之外定义了您的状态吗？ 尝试在组件中定义它。

const RegisterScreen = () => {
    
    const [roadmap, setRoadmap] = useState('');
    //rest of code...