```jsx
//App.js
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { AddThoughtForm } from './AddThoughtForm';
import { Thought } from './Thought';
import { generateId, getNewExpirationTime } from './utilities';
export default function App() {
const [thoughts, setThoughts] = useState([
{
id: generateId(),
text: 'This is a place for your passing thoughts.',
expiresAt: getNewExpirationTime(),
},
{
id: generateId(),
text: "They'll be removed after 15 seconds.",
expiresAt: getNewExpirationTime(),
},
]);
//1. 在过去的数组对象的基础上添加新的对象（想法）
const addThought = (thought) => {
setThoughts((prev)=>{return [thought, ...prev]})
};
//2. 传递addThought的更新状态到「想法添加表格」中，在表格中键入新的值将更新到下方的展示区
//9.添加删除的想法，筛选出不要被删除的想法并存储在函数中
const removeThought = (thoughtIdToRemove) => {
setThoughts(
thoughts.filter((thought)=>thought.id !== thoughtIdToRemove)
);
};
// 10 在thought组件中添加removethought函数，这样在点击remove按钮（x）时就会删除生成的id了。
return (
<div className="App">
<header>
<h1>Passing Thoughts</h1>
</header>
<main>
<AddThoughtForm addThought={addThought}/>
<ul className="thoughts">
{thoughts.map((thought) => (
<Thought key={thought.id} thought={thought} removeThought={removeThought} />
))}
</ul>
</main>
</div>
);
}
```
```jsx
// AddThoughtForm
import React, { useState }from 'react';
import { generateId, getNewExpirationTime } from './utilities';
export function AddThoughtForm(props) {
//3. 更新表单中新添加的文字的状态，存储这个值
const [text, setText] = useState('');
const handleTextChange = ({target}) => {
setText(target.value);
};
// 4. 处理提交的函数,在 handleSubmit() 内调用 event.preventDefault()。这可以防止浏览器在提交表单时执行其默认行为。
// 5. 创建一个新的thought对象，并将值传递给add thought
const handleSubmit = (event) => {
event.preventDefault();
const thought = {
id: generateId(),
text: text,
expiresAt: getNewExpirationTime(),
};
if(text.length>0){props.addThought(thought);}//6.来自App.js的<AddThoughtForm addThought={addThought}/>完成此操作后，您应该能够提交表格并看到新想法出现在屏幕上！ 8. 添加条件，键入字符大于0，否则会出现空的想法在网页上。
//7. 清除表单里的文字
setText('');
}
return (
<form className="AddThoughtForm" onSubmit={handleSubmit}>
<input
type="text"
aria-label="What's on your mind?"
placeholder="What's on your mind?"
value={text}
onChange={handleTextChange}
/>
<input type="submit" value="Add" />
</form>
);
}
```
```jsx
//Thought.js
import React, {useEffect} from 'react';
export function Thought(props) {
const { thought, removeThought } = props;
const handleRemoveClick = () => {
removeThought(thought.id);
};
//12.expiresAt是thought的对象属性，调用getexpirationtime：从现在开始+15秒
useEffect(()=>{
const timeRemaining = thought.expiresAt - Date.now()
const timeout = setTimeout(()=>{
removeThought(thought.id);// 为什么对“this is a place for your passing thoughts”不起作用？？？
},timeRemaining);// 设置一个定时器，将在15秒之后执行removeThought(thought.id);
return () => {
clearTimeout(timeout);
};
},[thought]);
return (
<li className="Thought">
<button
aria-label="Remove thought"
className="remove-button"
onClick={handleRemoveClick}
>
×
</button>
<div className="text">{thought.text}</div>
</li>
);
}
```
```jsx
// utilities.js
export function getNewExpirationTime() {
return Date.now() + 15 * 1000;
}
let nextId = 0;
export function generateId() {
const result = nextId;
nextId += 1;
return result;
}
```
- [Passing Thoughts](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-function-components-and-hooks-a2dba9bf-fc64-4118-8656-dfdc35f9e5cc/projects/react-hooks-passing-thoughts)
- [[js Events 事件 preventDefault()]]