Jquery ändern Funktion funktioniert nicht mit React JS

Question

Ich versuche, Eingabedatei Schaltfläche in React zu erstellen, und ich möchte den Dateinamen anzeigen, wenn die Datei mit jQuery ausgewählt wird.

My-Komponente, wo ich Eingabeknopf Komponente nennen, ist wie folgt:

<FileInputButton pictureID="idCard" pictureIcon="credit-card" text={language.btnIdCard} 
       btnName="idCard" className="col-lg-4 col-md-4 col-sm-4 col-lg-offset-2 col-md-offset-2 col-sm-offset-2"/> 

<FileInputButton pictureID="statuten" pictureIcon="file-text-o" text={language.btnStatut} 
       btnName="statuten" className="col-lg-4 col-md-4 col-sm-4 col-lg-offset-right-2 col-md-offset-right-2 col-sm-offset-right-2"/> 

<div className="clearfix noMarginXs"></div> 

<FileInputButton pictureID="blancoBriefhoofd" pictureIcon="file-o" text={language.btnBlanco} 
       btnName="blancoBriefhoofd" className="col-lg-4 col-md-4 col-sm-4 col-lg-offset-2 col-md-offset-2 col-sm-offset-2"/> 

<FileInputButton pictureID="companyPhoto" pictureIcon="camera-retro" text={language.btnCompanyPhoto} 
       btnName="companyPhoto" className="col-lg-4 col-md-4 col-sm-4 col-lg-offset-right-2 col-md-offset-right-2 col-sm-offset-right-2"/> 

Die FileInput- Komponente ist so etwas wie:

<div style={{width: '100%', textAlign: 'center', marginTop: 20}}> 
      <label className="advanced-button"> 
       <FontAwesome name="upload" className="faIcon" style={{height: '39px !important'}}/> 
       <span className={`btnFileText ${btnName}`}>{text}</span> 
       <input id="btnFile" type="file" style={{display: 'none'}} name={btnName}/> 
      </label> 
     </div> 

Und meine jQuery-Code ist wie folgt:

$(function() { 
    $("#btnFile").change(function() { 
     var id = this.name; 
     switch (id) { 
      case "idCard": 
      { 
       filename = $('#btnFile').val().split('\\').pop(); 
       filenameWithoutExtension = filename.replace(/\.[^/.]+$/, ""); 
       $('.' + id).text(filenameWithoutExtension); 
       console.log("Usao je u prvu"); 
       break; 

      } 
      case "statuten": 
      { 
       filename = $('#btnFile').val().split('\\').pop(); 
       filenameWithoutExtension = filename.replace(/\.[^/.]+$/, ""); 
       $('.' + id).text(filenameWithoutExtension); 
       console.log("Usao je u drugu"); 
       break; 
      } 
      case "blancoBriefhoofd": 
      { 
       filename = $('#btnFile').val().split('\\').pop(); 
       filenameWithoutExtension = filename.replace(/\.[^/.]+$/, ""); 
       $('.' + id).text(filenameWithoutExtension); 
       console.log("Usao je u trecu"); 
       break; 
      } 
      default: { 
       filename = $('#btnFile').val().split('\\').pop(); 
       filenameWithoutExtension = filename.replace(/\.[^/.]+$/, ""); 
       $('.' + id).text(filenameWithoutExtension); 
       console.log("Usao je u default"); 
      } 
     } 
    }); 
}); 

Wenn ich auf den ersten Knopf klicke, funktioniert alles gut. Der Text im Bereich wird mit der ausgewählten Datei geändert, die anderen Schaltflächen funktionieren jedoch nicht.

UPDATE

import React, {propTypes} from 'react'; 
import FontAwesome from 'react-fontawesome'; 

const FileInputButton = ({className, pictureID, pictureIcon, text, btnName}) => { 
    return (
     <div className={className}> 
      <div className="picture-container" style={{marginLeft: 18}}> 
       <div className="picture" id={pictureID}> 
        <FontAwesome name={pictureIcon} size="3x" className="picture-src" style={{paddingTop: 14}}/> 
       </div> 
      </div> 

      <div style={{width: '100%', textAlign: 'center', marginTop: 20}}> 
       <label className="advanced-button"> 
        <FontAwesome name="upload" className="faIcon" style={{height: '39px !important'}}/> 
        <span className={`btnFileText ${btnName}`}>{text}</span> 
        <input id="btnFile" type="file" style={{display: 'none'}} name={btnName}/> 
       </label> 
      </div> 
     </div> 
    ); 
}; 

FileInputButton.propTypes = { 
    className: React.PropTypes.string.isRequired, 
    pictureID: React.PropTypes.string.isRequired, 
    pictureIcon: React.PropTypes.string.isRequired, 
    text: React.PropTypes.string.isRequired, 
    btnName: React.PropTypes.string.isRequired 
}; 

export default FileInputButton; 

Answer 1

Ich weiß nicht, ob dies als eine Antwort qualifiziert, sondern als eine Skizze eine Art Ansatz reagieren könnte wie etwas sein:

// in Stammkomponente Zustand

initialisieren

Funktion getInitialState:() { state = {'displayField': '', 'displayFieldClass': ''} Rückgabestatus; }

// in übergeordnete Komponente definieren handler

function inputChange(e) { 
    this.state.displayField = e.target.value; 
    this.state.displayFieldClass = 'activeFileName'; //CSS class defined somwhere 
} 

// in übergeordnete Komponente Anzeige der Dateiname und machen die FileInputButton (e) Weitergabe in die Behandlungsroutine

function render() { 

    Filename: <span className={this.state.displayFieldClass}>{this.state.displayField}</span> 

    <FileInputButton handler={this.inputChange} ...otherProps /> 

} 

// in FileInputButton Ordnen Sie das Ereignis onChange dem übergebenen Handler zu.

function render() { 

    <input className="btnFile" type="file" onchange={this.props.handler}> 

}