問題：當頁面第一次加載時，PageHeader H1 標簽顯示一個空白值而不是“新頁面”。為什么會發生這種情況，如何讓它顯示“新頁面”？
在 Page.js 中
const [pageTitle, setPageTitle] = useState('New Page');
const pageTitleChangeHandler = (e) => {
setPageTitle(e.target.innerText);
}
return (
<PageHeader title = {pageTitle} onChange = {pageTitleChangeHandler}></PageHeader>
);
在 PageHeader.js 中
return (
<div className = "page-header">
<h1
className = "page-header-text"
contentEditable = "true"
onInput = {props.onChange}
value = {props.title}>
</h1>
</div>
);
uj5u.com熱心網友回復：
我想你應該洗掉value從h1標簽屬性和設定dangerouslySetInnerHTML，而不是像
import React from "react";
export default function PageHeader(props) {
return (
<div className="page-header">
<h1
className="page-header-text"
contentEditable="true"
onInput={props.onChange}
dangerouslySetInnerHTML={{ __html: props.title }}
>
</h1>
</div>
);
}
uj5u.com熱心網友回復：
如果你想New Page以顯示在頁面加載，你需要的引數更改為setPageTitle從e.target.innerText到e.target.value，并添加{props.title}的h1標簽。
然后您可以更改onInput為onKeyDown.
const [pageTitle, setPageTitle] = useState('New Page');
const pageTitleChangeHandler = (e) => {
// This will set the value prop
setPageTitle(e.target.value);
}
return (
<PageHeader
title={pageTitle}
onChange={pageTitleChangeHandler}
></PageHeader>
);
}
const PageHeader = (props) => {
return (
<div className="page-header">
<h1
className="page-header-text"
contentEditable="true"
onKeyDown={props.onChange}
value={props.title}
>
{props.title}
</h1>
</div>
);
請注意，這將洗掉“新頁面”并將其替換為鍵入的文本。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/346289.html
標籤：javascript html 反应
下一篇：如何在張量流中添加右零值