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

Question

因此，我有一个要在其中显示温度的输入字段。刚显示该字段时，我希望它显示为“ 49°F”，而当用户对其进行聚焦时，我希望它以步进值显示为“ 49” 。

到目前为止，这是我所拥有的，我的问题是在handleBlur（）函数上。 调用onFocus时，我将state.type更改为“ number”，这使我有了步进器，并强制重新渲染。 因为它是重新渲染的，所以我失去了对元素的关注，该元素随后导致它调用onblur并将其更改回“文本”类型。

我半完成的唯一方法是禁用onFocus的setState，但是当我单击输入时，它不会将其更改回“文本”类型。

我不确定该如何解决此问题，我尝试了模糊/聚焦的多种组合。 我当时的假设是，如果我为输入分配了一个键，它将不会失去焦点，因为它将更新组件而不是重新创建它，但是我猜测是因为我正在更改类型，因此它将强制重新创建它。 ？ 不确定。

Tldr：将输入类型从“数字”更改为“文本”时，状态导致onFocus和onBlur b / c之间循环，通过setState（）强制类型重新转换，而我失去对元素的关注触发onBlur。

任何帮助或指导将不胜感激！

    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

您可以更改输入类型而无需状态。 事件处理程序中的第一个参数是SyntheticEvent，您可以像这样更改输入类型

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