Question

对于一般标题感到抱歉，但我不知道此时还有什么可以称之为。我有一个使用小部件的表单。我使用react-jsonschema-form包。我使用github作为项目，但我认为这不是bug，所以我想先在这里查看。我认为这就是如何使用这个React的问题。也可能是Redux。

因此...

我为组件中的某些表单元素提供了这些小部件。

     dropdownWidget = (props, type, id) => {
    return (
        <div>
            <input id={id} type="text" className="form-control" list={type} placeholder="Select one..." onChange={(event) => { props.onChange(event.target.value); this.hideResultTables(event.target.id) }} />
            <datalist id={type}>
                {this.props.actionsObj.filterJsonData(type, this.props.convertDropDownDataObj).map((value, index) => { return <option key={index} value={value}>{value}</option> })}
            </datalist>
        </div>
    )
}

multiFileWidget = (props) => {
    return (
        <div>
            <OverlayTrigger trigger={['hover', 'focus']} placement="right" overlay={fileWidgetPopup}>
                <input type="file" id="multiFileName" required={props.required} onChange={(event) => { props.onChange(event.target.value); this.getFileNames(); this.hideResultTables(event.target.id) }} multiple />
            </OverlayTrigger>
            <textarea id="multiFileNameList" className="form-control" rows="4" style={{ marginTop: "2%" }} readOnly />
        </div>
    )
}


dropdownTooltipWidget = (props, type, id, tooltip) => {
    return (
        <div>
            <OverlayTrigger trigger={['hover', 'focus']} placement="right" overlay={tooltip} hidden>
                <input id={id} type="text" className="form-control" list={type} placeholder="Select one..." onChange={(event) => { props.onChange(event.target.value); this.hideResultTables(event.target.id) }} />
            </OverlayTrigger>
            <datalist id={type}>
                {this.props.actionsObj.filterJsonData(type, this.props.convertDropDownDataObj).map((value, index) => { return <option key={index} value={value}>{value}</option> })}
            </datalist>
        </div>
    )
}

它们被塞进一个像这样的物体中：

     multiUISchema = {
    file: {
        'ui:widget': this.multiFileWidget,
        classNames: "uiSchema",
    },
    convertTo: {
        'ui:widget': (props) => this.dropdownWidget(props, "ConvertToTypes", "multiConvertTo"),
        classNames: "uiSchema"
    },
    notification: {
        'ui:widget': (props) => this.dropdownTooltipWidget(props, "NotificationType", "notification", websNotificationPopup),
        classNames: "uiSchema"
    }
}

事情变得糟糕!!此函数将注册在小部件onChange处理程序中。

     hideResultTables(targetId) {
    debugger;
    //disable Retrieve button
    if (targetId === 'multiFileName' || targetId === 'multiConvertTo') {
        console.log("BEFORE::", this.state.formData)
        selectedFiles = [];
        document.getElementById("convertResultTable").setAttribute("hidden", true);
        document.getElementById("retrieveResultTable").setAttribute("hidden", true);
        this.setState({ disabled: true });

    }
    //leave Retrieve Button enabled
    else if (targetId !== 'appIDs') {
        console.log("BEFORE::", this.state.formData)
        selectedFiles = [];
        document.getElementById("convertResultTable").setAttribute("hidden", true);
        document.getElementById("retrieveResultTable").setAttribute("hidden", true);
    }
}

基本上，如果我点击第一个if语句，其setState for disabled为True，我的onChange似乎不会将选定的下拉数据保留到Form Data对象。这就像setState for Disabled一样，对于与该字段无关的按钮可能会在协调树中执行某些操作和/或我的表单数据永远不会保留formdata对象中的所选字段？ IDK的。如果该字段是一个匹配包含setState的第一个if语句的字段，则该字段在所有控制台日志中保持未定义。但是该setState与所选字段无关。它正在禁用页面下方的按钮。我确定我错过了一些React生命周期，协调异步或其他东西。我想只是减少这一切，但这个简单的bool值似乎应该保持为组件的本地状态。在我为我的表单减少这个简单的bool之前，我应该检查的任何想法？

为了进一步澄清我的问题，为什么onChange中注入函数中的setState似乎在我选择字段时破坏了我的Widget中表单上字段的onChange值更新。这就是这就是真的。我们无法弄清楚为什么会这样。

脚注**表单中的下拉数据是redux存储数据。所以我在小部件的onchange中选择商店数据。不确定这是否相关。

使用表单数据

0 个答案: