JSX bindet dies an eine Funktion innerhalb einer Map

Question

Ich verwende eine Map-Funktion und habe getestet und bestätigt, dass innerhalb der Maps-Funktion das Klassenobjekt wie gewünscht referenziert wird.

Wenn ich versuche, dies erneut zu übergeben, indem ich es an eine jsx-Funktion binde, übergibt es dies nicht wie gewünscht.

Fehler: Uncaught Typeerror:. _this3.checkType (...) binden ist keine Funktion

// wrapped in a class 

checkType(type, options, placeholder, name, handleUpdatedValue, defvalue, index) { 

     console.log(this); 

     switch(type) { 
      case 'select': 
       return <select onChange={handleUpdatedValue.bind(this)} >{options.map((option, i) => <option value={option} key={i}>{option}</option>)}</select> 
       break; 
      case 'text': 
       return <input onChange={handleUpdatedValue.bind(this)} name={name} placeholder={placeholder} type="text" /> 
       break; 
      case 'date': 
       return <input onChange={handleUpdatedValue.bind(this)} name={name} placeholder={placeholder} type="date" /> 
       break; 
      default: 
       console.log('Error: Invalid Type'); 
     } 
     return type === 'select' ? <select></select> : <input /> 
    } 

return(
     <div className="formwrapper thinshadow">  
      <h3>{this.props.header}</h3> 
      {this.getFields().map((field, i) => { 
       <div key={i} className={field.classes}> 
        {this.checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index).bind(this)} 

                    // DOES NOT WORK^

        <div className="minilabel"></div> 
       </div> 
      }, this)}           // THIS WORKS 

      <button className="btn btn-primary" 
        onClick={() => this.props.onClick(values)} > 
        Save 
      </button> 
     </div> 
    ); 

Answer 1

Du Aufruf der Funktion, anstatt sie zu binden.

this.checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index).bind(this) 

sollte

this.checkType.bind(this, field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index) 

bind Nutzungs

fun.bind(thisArg[, arg1[, arg2[, ...]]] 

, um weitere Informationen zu diesem Link finden:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

bearbeiten

Sie verwenden bind, wenn Sie Ihre Funktion in einem anderen Kontext sind vorbei (ein andere this ziemlich viel), und wollen immer noch die Funktion unter den ursprünglichen this aufgerufen werden.

In Ihrer Situation müssen Sie nicht binden, weil Sie innerhalb Ihrer map haben Sie die gleiche this. Siehe You Don't Need to Bind This in React when using forEach and map.

Aber wenn Sie wollen, rate ich dringend von bind ing wenn Sie iterieren. Sie können closure und bind vor der Iteration verwenden.

bind is slow, obwohl es die meiste Zeit nicht wirklich wichtig ist. Aber noch wichtiger ist, dass Sie bind in Iterationen wie forEach oder map nicht möchten, weil es leicht ist, den Kontext zu verlieren (this) ohne zu wissen (wenn Sie React nicht verwenden). Und du wirst dir für ein paar Stunden den Kopf kratzen.

Wenn Sie React verwenden, können Sie bind in der render Funktion.

render:() { 
    const checkType = this.checkType.bind(this); 
    render (
    map((node) => { checkType(...) }); 
); 
}