Javascript 控制该组件上的道具的无状态组件上的onClick事件

我有一个无状态组件，名为

EmailItem

：我想当我点击它时，我可以通过一些函数给它一个新的道具

<EmailItem key={i} onClick={// onClick function} emailData={email} read={false} />

---

email\uu read

className是电子邮件是否已被阅读的指示器

可能这个链接可以帮助你，我只是在那里给出了答案

---

也许这个链接可以帮助你，我只是在那里给出了答案

---

要想改变道具，你需要做的是改变道具的状态。状态不存在于该组件中并不重要。您可以从父组件传递回调，然后在无状态组件内调用此回调，并更改父组件中的状态。 注意：状态不必在父级中。它可以更高。 这将有助于您：

---

我希望这对你有帮助。

你需要做的是改变道具的状态。状态不存在于该组件中并不重要。您可以从父组件传递回调，然后在无状态组件内调用此回调，并更改父组件中的状态。 注意：状态不必在父级中。它可以更高。 这将有助于您：

---

我希望这对您有所帮助。

据我所知，您可以将函数（onClick）从父组件传递到子组件，并将emaildata绑定到该函数。ES6 arrow函数语法负责参数绑定，您可以在父级中获取emailData（已单击）

尝试以下示例（抱歉没有css）

类收件箱扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
电子邮件：[
{读：假，从“aaa”到“aaato”，主题：“aaasubject”，正文：“aaabody”，日期：“aaadate”，时间：“aaatime”}，
{读：对，从：“bbb”，到：“bbbto”，主题：“bbb主体”，正文：“bbbbbody”，日期：“bbbdate”，时间：“bbbtime”}，
{读：假，从“aaa”到“cccto”，主题：“cccsubject”，正文：“cccbody”，日期：“cccdate”，时间：“ccctime”}，
{读：假，从：“ddd”到“dddto”，主题：“dddsubject”，正文：“dddbody”，日期：“ddddate”，时间：“dddtime”}，
]
}
}
handleClick（索引，ele）{
//ele是emaildata，做任何你想做的事
var newEmails=this.state.emails
新建电子邮件[index]。读取=true
这是我的国家({
电子邮件：新电子邮件
})
}
render（）{
返回(
电子邮件

{
this.state.emails.map（（e，i）=>{
返回{this.handleClick（i，e）}/>
})
}
)
}
}
const EmailItem=（道具）=>{
让readClass=props.emailData.read？'--read'：'--unread'
返回(
{readClass}

来自{props.emailData.From}
到{props.emailData.subject}
正文{props.emailData.Body}
日期{props.emailData.Date}
时间{props.emailData.Time}
---------------------

)
}

据我所知，您可以将函数（onClick）从父组件传递到子组件，并将emaildata绑定到该函数。ES6箭头函数语法负责参数绑定，您可以在父级中获取emailData（单击了）

尝试以下示例（抱歉没有css）

类收件箱扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
电子邮件：[
{读：假，从“aaa”到“aaato”，主题：“aaasubject”，正文：“aaabody”，日期：“aaadate”，时间：“aaatime”}，
{读：对，从：“bbb”，到：“bbbto”，主题：“bbb主体”，正文：“bbbbbody”，日期：“bbbdate”，时间：“bbbtime”}，
{读：假，从“aaa”到“cccto”，主题：“cccsubject”，正文：“cccbody”，日期：“cccdate”，时间：“ccctime”}，
{读：假，从：“ddd”到“dddto”，主题：“dddsubject”，正文：“dddbody”，日期：“ddddate”，时间：“dddtime”}，
]
}
}
handleClick（索引，ele）{
//ele是emaildata，做任何你想做的事
var newEmails=this.state.emails
新建电子邮件[index]。读取=true
这是我的国家({
电子邮件：新电子邮件
})
}
render（）{
返回(
电子邮件

{
this.state.emails.map（（e，i）=>{
返回{this.handleClick（i，e）}/>
})
}
)
}
}
const EmailItem=（道具）=>{
让readClass=props.emailData.read？'--read'：'--unread'
返回(
{readClass}

来自{props.emailData.From}
到{props.emailData.subject}
正文{props.emailData.Body}
日期{props.emailData.Date}
时间{props.emailData.Time}
---------------------

)
}

如果您使用的是redux或类似工具，则分派操作，否则将函数（从父级）传递到此组件并调用它onclick@PriyeshKumar我正在使用Redux，我意识到这一能力。但我知道不能使用refs引用无状态组件。并且event.target不显示道具，只显示html属性。我对我将要使用的函数的内容比较困惑。很抱歉，在原始帖子中没有说清楚。如果你能把组件代码和上下文（你正在尝试做的事情）放在一起，那就更容易理解了。为什么你需要e.target或refs。要更新emaildata？如果您使用的是redux或类似工具，请发送操作，否则将函数（从父级）传递到此组件并调用它onclick@PriyeshKumar我正在使用Redux，我意识到这一能力。但我知道不能使用refs引用无状态组件。并且event.target不显示道具，只显示html属性。我对我将要使用的函数的内容比较困惑。很抱歉，在原始帖子中没有说清楚。如果你能把组件代码和上下文（你正在尝试做的事情）放在一起，那就更容易理解了。为什么你需要e.target或refs。更新emaildata？是的，我知道如何将函数传递给com

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>
  )
}

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>
  )
}