Reaktion Bindemethode in Konstruktor - wie in Argument übergeben

Question

Ich arbeite in React und beim Lesen Ich entschied mich, meine integrierende Bindung des Ereignishandlers in meinem Konstruktor wie sie empfehlen zu wechseln. Das Problem ist, wenn ich das tue, verliere ich die Fähigkeit, meine Formularvariable an die onChange Material-UI Checkbox Funktion zu übergeben. Hier ist mein entsprechenden Code

Client/Aussicht/ProspectForm.jsx

class ProspectForm extends React.Component { 
    constructor(props) { 
    super(props) 
    // Bind Methods 
    this.handleChangeProductType = this.handleChangeProductType.bind(this) 

    this.state = { 
    inquiryDate: moment().toDate(), 
    productTypes: {list: [], other: '', }, 
    otherChecked: false, 
    } 
    } 

    handleChangeProductType(a){ 
    console.log(a) 
    } 

    render() { 
    return(
     <div className="field"> 
     { this.props.allProductTypes.map((referralSource, k) => 
     <Checkbox 
      checked={this.checkProductType(referralSource)} 
      onCheck={this.handleChangeProductType(referralSource)} 
      label={referralSource} 
      key={k} /> 
     )} 
     </div> 
    ) 
    } 
} 

export default createContainer(() => { 

    const productTypes = [ 
     "Independent Living", 
     "Memory Care", 
     "Beauty Shop", 
     "Skilled Nursing", 
     "Therapy Rental", 
    ] 

    return { 
    productTypes: productTypes, 
    } 
}, ProspectForm) 

So im Wesentlichen, wenn ich die onChange mit dem Argument nennen, wie die

this.handleChangeProductType(referralSource) 

tut es nicht wirklich Rufen Sie die Methode auf. Als ich es wie folgt nennen

onChange={this.handleChangeProductType} 

sie das Verfahren nicht nennen, aber ich habe keinen Zugriff auf die referralSource in der Funktion, die ich den Zustand Objekt festlegen müssen, so kann ich die diejenigen verfolgen werden überprüft und sie senden zusammen mit meiner Form. Also, wie mache ich das so, dass ich die bind-Methode im Konstruktor verwenden und mein Argument an die Methode übergeben kann? Vielen Dank im Voraus

Answer 1

nicht über die bind im Konstruktor Sorgen Sie sich. Stattdessen können Sie es in der onCheck Deklaration binden und den ReferralSource-Parameter an bind übergeben.

onCheck={this.handleChangeProductType.bind(null, referralSource)} 

Answer 2

Sie können es auf diese Weise schreiben:

onCheck={(referralSource) => this.handleChangeProductType(referralSource)} 

Answer 3

Sie könnten auch einen Wrapper-Komponente für die <Checkbox /> erstellen, die für Sie die geeignete ‚geladen‘ Funktion erstellt.

const ProductTypeCheckbox = ({ 
    referralSource, 
    checkProductType, 
    handleChangeProductType, 
}) => { 
    const isChecked =() => checkProductType(referralSource); 
    const handleCheck =() => handleChangeProductType(referralSource); 

    return (
    <Checkbox 
     checked = { isChecked() } 
     onCheck = {() => handleCheck() } 
     label = { referralSource } 
    /> 
); 
}; 

Dann einfach ersetzen <Checkbox /> in der Liste oben mit

<ProductTypeCheckbox 
    key = { k } 
    referralSource = { referralSource } 
    checkProductType = { checkProductType } 
    handleChangeProductType = { handleChangeProductType } 
/> 

Dies wird ein wenig Aufwand erstellen, um eine neue Funktion für jedes Element in der Schleife zu schaffen, aber es ist eine saubere Trennung stumm und intelligente Komponenten, und ermöglicht es Ihnen, leicht zu lesen, was wo eingestellt wird.