【JS】React 踩坑记录

Z时代
2024-01-10
分类：技术分享

1.受控组件和非受控组件
【JS】React 踩坑记录

const AskModal = props => {
const { modalName, saveModal } = props;
const [text, setText] = useState(modalName || '');
useEffect(() => {
setText(modalName); // 关键点，应为setText(modalName || '')
}, [modalName]);
return (
<Panel title="保存自定义模版" width="300px" showX>
<InputField label="模版名称">
<input value={text} onChange={e => setText(e.currentTarget.value)} />
</InputField>
<div>备注：修改自定义模版后原模版将被覆盖，请确定是否保存当前模版？</div>
<div className="modal-btn">
<Button style={{ marginBottom: 16 }} onClick={() => saveModal(text)}>
保存
</Button>
</div>
</Panel>
);};