javascript - Jquery 更改功能不适用于 React JS

Question

我正在尝试在 React 中创建输入文件按钮，如果使用 jQuery 选择文件，我想显示文件名。

我调用输入按钮组件的组件如下:

<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"/>

FileInput 组件类似于:

<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>

我的jquery代码如下:

    $(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");
            }
        }
    });
});

当我单击第一个按钮时，一切正常。跨度中的文本会随所选文件而更改，但其他按钮将不起作用。

更新

    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

我不知道这是否符合答案，但作为草图，React 类型方法可能类似于:

//父组件初始化状态

函数 getInitialState: () { 状态= {'displayField':''，'displayFieldClass':''} 返回状态；}

//在父组件中定义处理程序

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

//在父组件中显示文件名并渲染传入处理程序的 FileInputButton

function render() {

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

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

}

//在FileInputButton中将onChange事件与传入的处理程序关联起来

function render() {

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

}