そのコンポーネントの小道具を制御するステートレスコンポーネントのonClickイベント

Question

私はEmailItemというステートレスコンポーネントを持っています：それをクリックすると、私はそれをいくつかの機能を介して新しい小道具にすることができます。

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

EmailItemがクリックされていると、読み取りpropがtrueに変更されます。

これは、ステートフルなコンポーネントをEmailItemとすることで実現できます。しかし、それは反復可能なコンポーネントであり、あなたが必要としない状態を追加する私の理解から、それは悪いです。間違っていれば私を正す。

e.targetとrefが動作しないため、私が使用する関数の内容について混乱します。

このread propは、ステートレスコンポーネントのアイテムのクラスを変更します。

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）を渡して、その関数にemaildataをバインドできます。 ES6の矢印関数の構文はパラメータの束縛を処理し、親でクリックされたemailDataを取得できます。

あなたがこのコンポーネントにReduxのまたは同様、ディスパッチアクション、（親から）他のパス機能を使用している場合（無し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

このリンクはあなたを助けることができるかもしれませ私が与えた張り出すその答え

How to pass function as props in React?

Answer 3

である何あなたの小道具を変更するには、状態を変更する必要があります。州がこのコンポーネントに住んでいないことは重要ではありません。コールバックを親コンポーネントから渡すことができ、ステートレスコンポーネント内でこのコールバックを呼び出して、親コンポーネントの状態を変更することができます。 注：状態は親に存在しません。それはより高い可能性があります。 これはあなたを助けるはずです：https://facebook.github.io/react/docs/lifting-state-up.html

私はこれがあなたに役立つことを願っています。