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

问题描述

我需要对文本字段进行一些小改动。基本上有一个清除搜索的重置按钮。用户可以在 TextField 中写入搜索字符串。但是 clear 函数只重置实际搜索，而不是 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 和状态处理的了解不足的地方。希望有人能给点提示。

标签： reactjstypescript

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

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

问题描述

解决方案

推荐阅读