SPFx 解决方案的附件组件（Web 部件）答案

【问题标题】：Attachment component for SPFx solution (webpart)SPFx 解决方案的附件组件（Web 部件）
【发布时间】：2022-12-22 14:17:59
【问题描述】：

我想知道如何为我的 SPFx 解决方案 (webpart) 创建附件组件，但无法弄清楚。

我已经制作了这样的 TextField 组件 ->

    import * as React from 'react';
import * as PropTypes from 'prop-types';
import { TextField } from 'office-ui-fabric-react';

const TextFieldInput = ({props, otherProps = null, onValueChange}) =>{
const handleChange = (event: any) => {
if(props.returnEvent){
onValueChange(event.target.value, event);
        }
else{
onValueChange(event.target.value);
        }
    };
return <TextField
className={props.class ? props.class : ""}
onChange={handleChange}
errorMessage={props.error ? props.error : ""}
label={props.label}
placeholder={props.placeholder ? props.placeholder : ""}
name={props.name ? props.name : ""}
value={props.value == undefined ? "" : props.value }
disabled={props.disabled == undefined ? false : props.disabled}  
required={props.required == undefined ? false : props.required}
multiline={props.multiline == undefined ? false : props.multiline}
rows={props.rows == undefined ? 0 : props.rows}
autoAdjustHeight={props.autoAdjustHeight == undefined ? false : props.autoAdjustHeight}
underlined={props.underlined == undefined ? false : props.underlined}
type={props.type == undefined ? "text" : props.type}
                {...otherProps}
/>;
};
TextFieldInput.propTypes = {
props: PropTypes.shape({
class: PropTypes.string,
error: PropTypes.string,
label: PropTypes.string.isRequired,
required: PropTypes.bool,
name: PropTypes.string,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
        ]),
disabled: PropTypes.bool,
placeholder: PropTypes.string,
multiline: PropTypes.bool,
rows: PropTypes.number,
autoAdjustHeight: PropTypes.bool,
underlined: PropTypes.bool,
returnEvent: PropTypes.bool,
type: PropTypes.string
      }),
otherProps: PropTypes.object,
onValueChange: PropTypes.func.isRequired
};
export default TextFieldInput;

据我所知，Office UI Fabric 没有附件组件我将不胜感激任何帮助！

【问题讨论】：

标签： reactjs attachment spfx office-ui-fabric

【解决方案1】：

您可以使用 spfx-controls-react 提供的 FilePicker 组件。它将提供一个类似于 SharePoint online 的用户界面，让您可以从不同的地方选择一个文件。

除此之外，您还可以使用 input type="file"，然后按照您想要的方式自定义它。您可以参考此链接： https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

【讨论】：