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类型方法可能类似于：

//在父组件初始化状态

function getInitialState：（）{ state = {＆＃39; displayField＆＃39; ：＆＃39;＆＃39;，＆＃39; displayFieldClass＆＃39;：＆＃39;＆＃39;} 返回状态; }

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

中

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事件与传入的处理程序

Jquery更改函数不适用于React JS

1 个答案: