计划：在输入框中输入字符串，当长度超过5位时阻止再次输入，并弹出警告。
首先在index.js页面的Home组件中设置字符串初始值为“a”。
按计划要求设置一个onChange事件
在return代码块中添加一个输入框，并调用上图完成的onChange事件函数
修改后的index.js页面代码如下
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Footer } from '../components/Footer'
import { Main } from '../components/Main'
import { Header } from '../components/Header'
import { useCallback, useEffect, useState } from 'react'
export default function Home() {
const[bar, setBar] = useState(1);
const[text, setText] = useState("a");
const handleClick = useCallback((e) =>{
console.log(bar);
setBar((prevBar) => prevBar + 1);
},[bar]);
const handleChange = useCallback((e) => {
console.log(text);
if (e.target.value.length > 5) {
alert("输入不能超过5个字符");
return;
}
setText(e.target.value.trim());
},[text]);
useEffect(() =>{
document.body.style.backgroundColor = "lightblue";
return (() =>{
document.body.style.backgroundColor = "lightgreen";
})
},[]);
return (
<div className={styles.container}>
<Head>
<title>Index page</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
<h1>{bar}</h1>
<button onClick={handleClick}>
累计按钮
</button>
<input type="text" value={text} onChange={handleChange} />
<Main page="index"/>
<Footer />
</div>
)
}
刷新index.js页面
尝试输入“bcdefgh”，发现“fgh”已无法输入，并弹出警告。至此计划完成。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
