javascript - 无状态组件上的 onClick 事件控制该组件上的 Prop

Question

我有一个名为 EmailItem 的无状态组件:我希望在单击它时能够通过某个函数为其提供一个新的 prop。

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

我希望在单击 EmailItem 时，read 属性的值更改为 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 类名是电子邮件是否已读的指示器

Answer 1

据我了解，您可以将函数 (onClick) 从父组件传递到子组件，并将电子邮件数据绑定(bind)到该函数。 ES6 箭头函数语法负责参数绑定(bind)，您可以在父级中获取电子邮件数据(已单击)。

试试下面的例子(抱歉没有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>
  )
}