首頁(yè) 猿問(wèn) 為什么 onChange...

為什么 onChange 觸發(fā)器更新后我的頁(yè)面會(huì)重新加載？

JavaScript

達(dá)令說(shuō) 2023-11-12 14:27:20

我已經(jīng)用不同的方法添加了不同的表單，但是當(dāng)我在輸入字段中輸入任何內(nèi)容時(shí)，頁(yè)面會(huì)重新加載并保持狀態(tài)，并且我必須再次單擊該字段并輸入，然后會(huì)發(fā)生相同的循環(huán)。如果我添加所有內(nèi)容作為回報(bào)，它工作正常。有人可以解釋為什么會(huì)發(fā)生這種情況以及如何阻止它嗎？我也分享一段代碼。function MyForm() { const [commentForm, setCommentForm] = useState({ Comment: "", }); const onCommentChange = (obj) => { setCommentForm((prevState) => { return { ...prevState, ...obj, }; }); }; const IForm = () => ( <Table> <CardBody> <Row> <Col className="col-2"> <Label>Comment: </Label> </Col> <Col className="col-1"> <Input type="text" value={commentForm.Comment} onChange={(e) => onCommentChange({ Comment: e.target.value })} /> </Col> </Row> </CardBody> </Table> ); return ( <div> <IForm /> </div> )}export default MyForm

查看完整描述

3 回答

四季花海

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊

那是因?yàn)槟鶬Form在當(dāng)前組件內(nèi)定義為 A 組件，這是不正確的。所以你有兩個(gè)解決方案。

1 - 移出IFORM Component當(dāng)前反應(yīng)。

function MyForm() {

const [commentForm, setCommentForm] = React.useState({

Comment: ""

});

const onCommentChange = (obj) => {

setCommentForm((prevState) => {

return {

...prevState,

...obj

};

});

};

return (

<div>

</div>

);

}

export default MyForm;

const IForm = ({ commentForm, onCommentChange }) => (

<Table>

<Row>

<Label>Comment: </Label>

</Col>

<Input type="text"

value={commentForm.Comment}

onChange={(e) =>

onCommentChange({ Comment: e.target.value })} />

</Col>

</Row>

</CardBody>

</Table>

);

2 - 將 IForm 聲明為當(dāng)前組件內(nèi)的普通函數(shù)。

function MyForm() {

const [commentForm, setCommentForm] = React.useState({

Comment: ""

});

const onCommentChange = (obj) => {

setCommentForm((prevState) => {

return {

...prevState,

...obj

};

});

};

const form = () => (

<Table>

<Row>

<Label>Comment: </Label>

</Col>

<Input type="text"

value={commentForm.Comment}

onChange={(e) =>

onCommentChange({ Comment: e.target.value })} />

</Col>

</Row>

</CardBody>

</Table>

);

return <div> {form()} </div>;

}

export default MyForm;

反對(duì) 回復(fù) 2023-11-12

慕的地8271018

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊

原因是 IForm 組件是在 MyForm 組件內(nèi)部聲明的。這意味著每當(dāng) MyForm 組件的狀態(tài)發(fā)生變化時(shí)，它都會(huì)刷新其 dom 樹(shù)。當(dāng) dom 重新渲染功能組件時(shí)，IForm 將再次執(zhí)行，這就是為什么你總是會(huì)失去輸入的焦點(diǎn)，但永遠(yuǎn)不會(huì)失去 MyForm 組件的狀態(tài)。

要阻止這種情況發(fā)生，請(qǐng)?jiān)?MyForm 組件外部聲明 IForm 組件，或者將 IForm 的 jsx 移至 MyFOrm 組件的 Return 內(nèi)部。

反對(duì) 回復(fù) 2023-11-12