Aufruf von setState von einer Funktion, die als Requisite übergeben wurde

Question

Ich möchte eine große Komponente modularisieren, damit ich einige ihrer Teile wiederverwenden kann.

Beide Male eine Liste gerendert, auf der ich Operationen ausführen kann: aktualisiert meine modals Zustand, so dass es schließt, startet dann eine Redux-Aktion mit einem Server-Aufruf.

So würde Ich mag eine Funktion zu übergeben, die das Verhalten benutzerdefinierte definiert:

var handleSubmit = (name, description, author) => { 

    if (inputsValidated(name, description)) { 
     this.setState({ addingNewProject: false, errorMessage: '' }); 

     var payload = { name: name, date: new Date(), description: description, author: author}, 
      routeToPushAfter = `/app/users/${author._id || 'notsigned'}`, 
      serverRoute = allRoutes.projectURL, 
      type = 'project' 

      this.props.postData(payload, routeToPushAfter, serverRoute, type); 
    } 

    else { 
     this.setState({ errorMessage: 'Please fill out form' }); 
    } 
} 

Dann diese Funktion an die Komponente zu übergeben.

render() { 
    return (
     <div style={main}> 
      <DynamicList {...this.props} /> 
      <DynamicList {...this.props} handleSubmit={handleSubmit} handleDelete={handleDelete} /> 
     </div> 
    ); 
} 

Das Problem ist: die this.setState wird an die übergeordnete Komponente gebunden ist. Wie könnte ich eine Funktion übergeben, mit der ich den lokalen Zustand ändern kann (ohne Redux zu verwenden).

Vielen Dank für jede Eingabe!

Answer 1

Sie können die Funktion der Komponente innerhalb DynamicList ‚s Konstruktor binden:

constructor(props) { 
    super(props); 
    if (this.props.handleSubmit) { 
    this.handleSubmit = this.props.handleSubmit.bind(this); 
    } 
}