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

Question

我有一个 ma​​terial-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>
      );
    }
  }