ref callback not works as expected.

[liudonghua123]

What is the current behavior?
I used the ref callback in my code, I want to implement clicking a input and got that focused.
My main code was the belows.

  handleFocus = name => event => {
    console.info(`handleFocus ${name}, ${this[name]}`);
    if (this[name]) {
      this[name].focus();
    }
  };

  itemRenderer = (item, index) => {
    return (
      <div className={this.props.classes.card} key={`${item.search}-${item.replace}`}>
        <div className={this.props.classes.cardContent}>
          <div className={this.props.classes.cardLeftContent}>
            {this.state.editMode[index] ? <Input onKeyDown={this.handleKeyDown(item, index)} autoFocus ref={input => { console.info(`set ref ${input} on ${this}`); this.searchInput = input }} value={this.state.searchEdit} onClick={this.handleFocus('searchInput')} onChange={this.handleChange('searchEdit')} className={this.props.classes.input} inputProps={{ 'aria-label': 'Description', }} /> : <div onClick={this.handleDoubleClick(item, index)} className={this.props.classes.cardSearch}>{item.search}</div>}
            <div className={this.props.classes.cardArrow}>{' -> '}</div>
            {this.state.editMode[index] ? <Input onKeyDown={this.handleKeyDown(item, index)} ref={input => { console.info(`set ref ${input} on ${this}`); this.replaceInput = input }} value={this.state.replaceEdit} onClick={this.handleFocus('replaceInput')} onChange={this.handleChange('replaceEdit')} className={this.props.classes.input} inputProps={{ 'aria-label': 'Description', }} /> : <div onClick={this.handleDoubleClick(item, index)} className={this.props.classes.cardReplace}>{item.replace}</div>}
          </div>
          <div className={this.props.classes.cardRightAction}>
            <Button variant="contained" color="primary" onClick={this.handleUpdate(item, index)} disabled={!this.state.editMode[index]}>修改</Button>
            <Button variant="contained" color="primary" onClick={this.handleDelete(item)}>删除</Button>
          </div>
        </div>
      </div>
    );
  };

But in the handleFocus, the this.replaceInput is not the actural one, I could not invoke this.replaceInput.focus() or this.replaceInput.current.focus() or this.replaceInput.input.focus() .

The full code is here.

I have read #8359 and https://reactjs.org/docs/refs-and-the-dom.html#callback-refs but still could not make it works as expected.

[liudonghua123]

After some search, I found that's not the react issue, I need to use inputRef instead of ref.
see more on kriasoft/isomorphic-style-loader#26 (comment) and mui/material-ui#10106