问题描述
我有一个带有 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>
)
};
解决方法
可能是因为您在 RegisterScreen 组件之外定义了您的状态? 尝试在组件中定义它。
const RegisterScreen = () => {
const [roadmap,setRoadmap] = useState('');
//rest of code...