[英]onClick event on stateless components controlling a prop on that Component
我有一個名為EmailItem
的無狀態組件:單擊該按鈕時,我可以通過一些功能為其提供新的道具。
<EmailItem key={i} onClick={// onClick function} emailData={email} read={false} />
我想要單擊EmailItem
時將EmailItem
更改為true。
我知道可以通過使EmailItem
成為全狀態組件來完成; 但是,它是一個可迭代的組件,並且據我了解,添加不需要的狀態是很糟糕的。 如果有錯請指正。
我對要使用的函數的內容感到困惑,因為e.target和refs無法正常工作。
該read
道具將更改無狀態組件中項目的類。
const EmailItem = (props) => {
let readClass = props.emailData.read ? '--read' : ''
return (
<div onClick={props.onClick} className='email'>
<div className={'email__read' + readClass} />
<div className='email__leftside'>
<div className='email__from'>{props.emailData.from}</div>
<div className='email__subject'>{props.emailData.subject}</div>
<div className={'email__body'}>{props.emailData.body}</div>
</div>
<div className='email__rightside'>
<div className='email__date'>{props.emailData.date}</div>
<div className='email__time'>{props.emailData.time}</div>
</div>
</div>
)
}
email__read
className指示是否已閱讀電子郵件
據我了解,您可以將函數(onClick)從父組件傳遞到子組件,並將emaildata綁定到該函數。 ES6箭頭函數語法負責參數綁定,您可以在父級中獲取emailData(已單擊)。
試用以下示例(對不起,沒有CSS)
class Inbox extends React.Component {
constructor(props) {
super(props)
this.state = {
emails: [
{ read: false, from: "aaa", to: "aaato", subject: "aaasubject", body: "aaabody", date: "aaadate", time: "aaatime" },
{ read: true, from: "bbb", to: "bbbto", subject: "bbbsubject", body: "bbbbody", date: "bbbdate", time: "bbbtime" },
{ read: false, from: "aaa", to: "cccto", subject: "cccsubject", body: "cccbody", date: "cccdate", time: "ccctime" },
{ read: false, from: "ddd", to: "dddto", subject: "dddsubject", body: "dddbody", date: "ddddate", time: "dddtime" },
]
}
}
handleClick(index, ele) {
// ele is emaildata, do anything you want
var newEmails = this.state.emails
newEmails[index].read = true
this.setState({
emails: newEmails
})
}
render() {
return (
<div>
<p>Emails</p>
{
this.state.emails.map((e, i) => {
return <EmailItem emailData={e} key={i} onClick={() => { this.handleClick(i, e) }} />
})
}
</div>
)
}
}
const EmailItem = (props) => {
let readClass = props.emailData.read ? '--read' : '--unread'
return (
<div onClick={props.onClick} className='email'>
<div className={'email__read' + readClass} />
<div className='email__leftside'>
<p>{readClass}</p>
<div className='email__from'>From {props.emailData.from}</div>
<div className='email__subject'>To {props.emailData.subject}</div>
<div className={'email__body'}>Body {props.emailData.body}</div>
</div>
<div className='email__rightside'>
<div className='email__date'>Date {props.emailData.date}</div>
<div className='email__time'>Time {props.emailData.time}</div>
</div>
<p>---------------------</p>
</div>
)
}
更改道具所需要做的就是更改狀態。 狀態不在此組件中並不重要。 您可以從父組件傳遞回調,然后在無狀態組件內部調用此回調並更改父組件的狀態。 注意:State不在父級中。 它可以更高。 這應該對您有幫助: https : //facebook.github.io/react/docs/lifting-state-up.html
希望對您有幫助。
也許這個鏈接可以幫助您,我在那兒給出了答案
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.