Question

我有一个 material-ui CharField，但是我无法键入完整的字符串，因为在输入一个键后它将失去焦点，因此我必须在每次击键之后单击它，即不可接受。

这是我的组件SearchControl：

render() {
    const SearchControl = () => {
      return (
        <div className="col-6">
          <TextField
            className="col-11"
            id={this.state.code}
            defaultValue={this.state.code}
            label={"Modelo o Número de Serie"}
            variant="outlined"
            onChange={this.handleChange.bind(this)}
          />
          <IconButton
            ariaLabel="Buscar"
            className="col-1"
            onClick={this.handleSearchProductClick}
          >
            <SearchIcon />
          </IconButton>
        </div>
      );
    };

    if (!this.state.messageShown) {
      return (
        <div>
          <div style={{ display: "flex" }}>
            <NavBar onUpdate={this.onUpdate} />
          </div>
        </div>
      );
    } else {
      return (
        <div>
          <div fullWidth style={{ display: "flex", paddingTop: "30px" }}>
            <SearchControl />
            <ShortcutButtons />
          </div>
          <div fullWidth>
            <ProductsTable />
          </div>
          <div fullWidth />
          <div fullWidth style={{ display: "flex", paddingTop: "10px" }}>
            <ControlButtons />
            <TotalsDisplay />
          </div>
        </div>
      );
    }
}

Answer 1

我找到了解决方案。问题在于SearchControl组件是一个箭头函数，这意味着每个渲染它都是一个崭新的功能，因此每个渲染都是一个崭新的组件。

我将SearchControl组件声明更改为常规函数，因此每个渲染都将引用相同的函数，因此也引用相同的组件：

constructor(props) {
    super(props);

    this.SearchControl = this.SearchControl.bind(this);
}

SearchControl() {
      return (
        <div className="col-6">
          <TextField
            className="col-11"
            id={this.state.code}
            defaultValue={this.state.code}
            label={"Modelo o Número de Serie"}
            variant="outlined"
            onChange={this.handleChange.bind(this)}
          />
          <IconButton
            ariaLabel="Buscar"
            className="col-1"
            onClick={this.handleSearchProductClick}
          >
            <SearchIcon />
          </IconButton>
        </div>
      );
    }

render() {
   if (!this.state.messageShown) {
      return (
        <div>
          <div style={{ display: "flex" }}>
            <NavBar onUpdate={this.onUpdate} />
          </div>
        </div>
      );
    } else {
      return (
        <div>
          <div fullWidth style={{ display: "flex", paddingTop: "30px" }}>
            <this.SearchControl />
            <ShortcutButtons />
          </div>
          <div fullWidth>
            <ProductsTable />
          </div>
          <div fullWidth />
          <div fullWidth style={{ display: "flex", paddingTop: "10px" }}>
            <ControlButtons />
            <TotalsDisplay />
          </div>
        </div>
      );
    }
  }

React Material-UI TextField使每个键失去焦点

1 个答案: