onClick-Ereignis auf zustandslosen Komponenten, die eine Stütze auf dieser Komponente steuern

Question

Ich habe eine zustandslose Komponente namens EmailItem: Ich will, wenn ich es anklicke, kann ich es eine neue Stütze über eine Funktion geben.

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

ich will, wenn die EmailItem ist klicken Sie die Lesestütze auf true ändert.

Ich verstehe, dass dies getan werden kann, indem EmailItem eine Statefull-Komponente machen; Es ist jedoch eine iterierbare Komponente und von meinem Verständnis Hinzufügen von Zustand, wo Sie nicht brauchen, ist es schlecht. Korrigiere mich wenn falsch.

Ich bin verwirrt über den Inhalt der Funktion, die ich verwenden würde, da e.target und refs nicht funktionieren.

Diese Property read wird die Klasse eines Elements in der zustandslosen Komponente ändern.

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

Die email__read classname ist ein Indikator dafür, ob die E-Mail gelesen wurde oder nicht

Answer 1

Von was ich verstanden habe, können Sie Funktion (onClick) von Eltern zu Kind-Komponente übergeben und Emaildata an diese Funktion binden. Die ES6-Pfeilfunktionssyntax kümmert sich um die Parameterbindung, und Sie können E-Mail-Daten (die geklickt wurden) im übergeordneten Element abrufen.

Probieren Sie folgendes Beispiel (sorry für keine 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> 
) 
} 

Answer 2

diesen Link können Sie sein kann helfen i Jut gab seine Antwort dort

How to pass function as props in React?

Answer 3

Was Sie Um deine Requisiten zu ändern, musst du den Zustand ändern. Es spielt keine Rolle, dass der Staat nicht in dieser Komponente lebt. Sie können Callback von Ihrer übergeordneten Komponente übergeben und diesen Callback in Ihrer zustandslosen Komponente aufrufen und den Status in der übergeordneten Komponente ändern. Hinweis: Status befindet sich nicht im übergeordneten Element. Es kann höher sein. Dies sollte Ihnen helfen: https://facebook.github.io/react/docs/lifting-state-up.html

Ich hoffe, das ist hilfreich für Sie.