我有一个名为EmailItem
的无状态组件:我希望当我点击它时,我可以通过一些功能给它一个新的道具。
<EmailItem key={i} onClick={// onClick function} emailData={email} read={false} />
我想在点击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指示电子邮件是否已被阅读
答案 0 :(得分:3)
根据我的理解,您可以将函数(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>
)
}
答案 1 :(得分:1)
改变道具需要做的是改变状态。国家不住在这个组成部分并不重要。您可以从父组件传递回调,然后在无状态组件中调用此回调并更改父组件中的状态。 注意:州不在父母身边。它可以更高。 这可以帮助您:https://facebook.github.io/react/docs/lifting-state-up.html
我希望这对你有所帮助。
答案 2 :(得分:0)
可能这个链接可以帮助你我在那里给出答案