Question

我需要对文本字段进行一些小的更改。基本上有一个重置按钮可以清除搜索。用户可以在文本字段中写入搜索字符串。但是clear函数只会重置实际的搜索，而不会重置TextField，TextField仍然包含用户编写的某种搜索字符串。

interface DrawerContainerProps {
    dataProfile: DataProfile;
}

interface DrawerContainerComponentProps extends DrawerContainerProps, WithStibStyles<typeof styles>, WithNamespaces {
}

interface DrawerCantainerState {
    attributeSearchText: string;
}

class ProfileDrawerContainerComponent extends React.Component<DrawerContainerComponentProps, DrawerCantainerState> {
    readonly state: Readonly<DrawerCantainerState> = {
        attributeSearchText: ""
    };

    setAttributeSearchText = debounce((searchText) => this.setState({ attributeSearchText: searchText }), 200);

    onSearch = (event: React.ChangeEvent<HTMLInputElement>) => this.setAttributeSearchText(event.target.value);

    clearSearch = () => this.setAttributeSearchText("");

    render() {
        const { classes, dataProfile, t } = this.props;

        return (
            <Drawer
                variant="permanent"
                classes={{ paper: classes.drawerPaper }}>
                <div className={classes.toolbar} />
                <div className={classes.menu}>
                    <Typography className={classes.drawerTitle}>{t("drawer.objectType", { defaultValue: "Object Type Filter" })}</Typography>
                    <div className={classes.objectTypes}>
                        {dataProfile && <ObjectTypeDrawer
                            objectTypes={dataProfile.profiledObjectTypes}
                            objectCount={dataProfile.objectCount}
                            businessConditionFiltering={dataProfile.businessConditionFilteringResult} />}
                    </div>
                    <div className={classes.attributeTitleSearch}>
                        <Typography className={classes.drawerTitle}>{t("drawer.attributes", { defaultValue: "Attributes" })}</Typography>
                        <TextField
                            id="attribute-search"
                            placeholder={t("drawer.search", { defaultValue: "Search" })}
                            type="search"
                            className={classes.searchField}
                            onChange={this.onSearch }
                        />
                    </div>
                    <div className={classes.attributes}>
                        <AttributesDrawer attributeFilter={this.state.attributeSearchText} sendFunction={this.clearSearch} />
                    </div>
                </div>
            </Drawer>
        );
    }
}

我对网络编程的知识非常基础。但是我怀疑每当调用clearSearch函数时，它也必须更新TextField的值。但这就是我对React和状态处理的了解不足的地方。希望有人能给出提示。

Answer 1

您需要“控制” TextField的值。那是

                        <TextField
                            id="attribute-search"
                            placeholder={t("drawer.search", { defaultValue: "Search" })}
                            type="search"
                            className={classes.searchField}
                            onChange={this.onSearch }
                            value={this.state.attributeSearchText}
                        />

状态更改后需要TextField更新文本

1 个答案: