Question

我是新来的人，我想添加一个功能，其中用户按下按钮，然后出现一个新的文件输入字段。但是，到目前为止，我还没有取得太大的成功。单击按钮如何添加新的输入字段？

我创建了一个名为FormRow的单独组件，并将其添加到字典中名为imageInputFields（定义如下）的voiceInputFields，videoInputFields，filecounts数组中父组件称为VisitForm。对于每个FormRow组件，我根据filecounts

中文件类型数组中已经存在的元素数，给出了一个唯一的键。

filecounts = {
    imageInputFields: [],
    voiceInputFields: [],
    videoInputFields: []
}

这是我如何为预期的文件类型定义FormRow组件的代码片段：

class FormRow extends Component {

    constructor(props) {
        super(props);
        this.state = {
            type: this.props.type, // get the type of the input
            id: this.props.id, // get the id of the input
            labelText: this.props.labelText, // get the text that goes between labels
            placeHolder: this.props.placeHolder // get the placeholder text
        }
        console.log(props);
    }

    render() {



        console.log(this.props);
        var formOutput = [];
        // check if non-textual type
        const labelID = this.state.id+'-label';

        if (this.state.type === "image" || this.state.type === "voice" || this.state.type === "video") {

                formOutput.push(
                            <div  className="input-group mb-3" id = {this.state.id+"div1"} key = {this.state.id+"div1"}>
                                <div className="custom-file" id = {this.state.id+"div2"} key = {this.state.id+"div2"}>
                                    <label className="custom-file-label" id={labelID} key = {labelID} htmlFor={this.state.id}>Choose file</label>
                                    {/* Note: onChange event in this case updates both the file and the inner html of label to reflect upload status */}
                                    <input key={this.state.id}
                                            type="file"
                                        className="custom-file-input form-control" 
                                            id={this.state.id}  
                                            onChange={(event) => { this.props.onChange(event); document.getElementById(labelID).innerHTML = "Uploaded!"}} 
                                            /> 
                                </div>
                            </div>
                    )

        }


        return (
                <React.Fragment>

                {formOutput}
                </React.Fragment>

        );

    }


}

export default FormRow;

正如您在this.state.type === "image" || this.state.type === "voice" || this.state.type === "video"情况下所看到的，我已经介绍了每个属性的键。

下面的getInputField根据用户对其他输入字段的规范返回一个FormRow组件：

getInputField = (type) => {
    var inputField = null
    if (type === "image") {
        inputField =  <FormRow type="image" id={"image"+this.filecounts.imageInputFields.length}
             key={"image"+this.filecounts.imageInputFields.length}  labelText="Image" onChange={this.handleInputChange} /> 
    } else if (type === "voice") {
        inputField = <FormRow type="voice" id={"voice"+this.filecounts.voiceInputFields.length}
             key={"voice"+this.filecounts.voiceInputFields.length} labelText="Voice" onChange={this.handleInputChange} />
    } else {
        inputField = <FormRow type="video" id={"video"+this.filecounts.videoInputFields.length}
             key={"voice"+this.filecounts.voiceInputFields.length} labelText="Video" onChange={this.handleInputChange} />
    }
    return inputField
}

上面的方法由VisitForm组件中的以下函数调用：

addFileInputRow = (type) => {
    console.log(this.filecounts.imageInputFields)
    this.filecounts.imageInputFields.push(this.getInputField(type))
}

随后，VisitForm的render函数中的以下代码将调用哪个：

            <div className="container" style={{backgroundColor: 'lightgrey', borderRadius: borderRadiusValue}} >
                     <div className="form-group" style={{marginBottom: -3}}>
                            <label > Insert Image  </label>
                            {this.filecounts.imageInputFields}
                            <button type="button" className="btn btn-primary btn-sm" onClick={this.addFileInputRow("image")}>Small button</button>
                    </div>
            </div>

现在，我只是想为图像添加更多字段。

我希望页面显示更多字段以上传图像。但是，单击“小按钮”按钮后，网页上没有填充任何字段。虽然，当我在控制台中检查filecounts.imageInputFields时，它似乎正在填充。我不确定为什么会这样，以及如何使其他定义的字段显示在页面上。任何帮助，将不胜感激。

无法使用按钮渲染其他文件输入字段

0 个答案: