[英]How can I pass my Todo component Data into my Todolist component using React hooks?
[英]How to submit data in todo using react hooks
我想使用 React 钩子重构我的 todo 应用程序,一旦用户输入标题和消息,它们就会保存在一个数组中。
const Messages = () => {
const [messages, saveMessages] = useState([
{
title: 'Dan',
message: 'Hola !'
}
]);
const [post, setPost] = useState('')
const [title, setTitle] = useState('')
const handleSubmit = () => {
saveMessages([...messages, post, title])
}
return (
<Col lg={9} md={9} sm={12} style={{border: '1px solid grey', paddingTop: '20px'}}>
<div style={{display: 'flex', justifyContent: 'start', alignItems: 'center'}}>
<input value={title} onChange={ (e) => setTitle(e.target.value)} className='mr-3 textField' placeholder='your title ...' style={{padding: '5px 5px', borderRadius: '50px', width: '60%', boxShadow: '0px 4px 16px rgba(17,17,26,0.1), 0px 8px 24px rgba(17,17,26,0.1), 0px 16px 56px rgba(17,17,26,0.1)'}}/>
<textarea value={post} onChange={ (e) => setPost(e.target.value)} className='mr-3 textField' placeholder='your message ...' style={{padding: '5px 20px', borderRadius: '50px', width: '60%', boxShadow: '0px 4px 16px rgba(17,17,26,0.1), 0px 8px 24px rgba(17,17,26,0.1), 0px 16px 56px rgba(17,17,26,0.1)'}}/>
<Button variant="contained" color="primary" onClick={handleSubmit}>
Add post
</Button>
</div>
<div>
{/* <Post message={this.state.message} /> */}
<Post title='Ksena' image='https://i.pinimg.com/originals/cb/7c/6a/cb7c6afd13741ce6a58c1584d8b59097.jpg' message='Hello there !'/>
<Post title='Josh' image='https://www.pauldavidsmith.co.uk/wp-content/uploads/2019/08/corporate-portraits-peterborough-48-705x529.jpg' message='Welcome !'/>
{messages.map(i => {
return (
<Post title={i.title} message={i.message}/>
)
})}
</div>
</Col>
)
}
但它仅在提交后呈现图像(单击“添加帖子”按钮)我想知道是否应该创建 2 个挂钩/数组来保存消息和标题?
const handleSubmit = useCallback(() => {
saveMessages([
...messages,
{
message: post,
title: title,
},
]);
}, [messages, post, title]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.