更改Material UI输入VIA状态会创建无限的onfocus / onblur循环

Question

So I have an input field that I want to display a temperature in. When the field is just being displayed I want it to show "49°F" and when the user focuses it I want it to show "49" with the stepper values.

So far this is what I have, my issue is on the handleBlur() function. When onFocus is called, I change the state.type to be "number" which gives me the stepper, and forces a re-render. Because it is re-rendered I lose focus on the element which then causes it to call onblur and change it back to a "text" type.

The only way I have got it to semi-work is to disable the setState for the onFocus, but when I click out of my input it doesn't change it back to a type of "text".

I am not sure what to do here to fix this, I've tried multiple combinations of the blur/focus. I was under the assumption that if I assigned a key to the input, it wouldn't lose focus as it would update the component rather than re-create it, but I am guessing since I am changing the type it forces it to be recreated? Not sure.

Tldr: Changing input type from "number" to "text" VIA the state causes a loop between the onFocus and onBlur b/c the transition of the type via setState() forces it to be re-rendered and I lose focus on the element triggering onBlur.

Any help or guidance would be greatly appreciated!

    handleBlur = () => {
    cl("Handling the blur" + this.state.value)
    this.setState({
        type: "text",
    })
    //this.nameInput.type = "text";
};

onFocus = e => {
    cl("Handling the focus " + this.state.value)
    this.setState({
        type: "number",
        value: this.state.rawValue
    });
    this.nameInput.focus()
};

onChange = e =>{
    this.setState({
        value: e.target.value
    })
}

render() {
    return (
        <div key="help">
            <Input
                key="temperature"
                margin="dense"
                value={this.state.value}
                ref={(input) => {this.nameInput = input;}}
                onChange={this.onChange}
                onBlur={this.handleBlur}
                onFocus={this.onFocus}
                inputProps={{
                    step: this.step,
                    min: this.min,
                    max: this.max,
                    type: this.state.type
                }}
            />
        </div>
    );
}

Answer 1

You can change input type without state. First argument in event handler is SyntheticEvent, you can change input type like this

onFocus = e => {
  e.currentTarget.type = "number";
};