Javascript 干反应输入处理导致光标跳转

我试图让我的react表单干涸一点，所以我想把我的基本输入处理函数移到一个实用模块中，并尝试重用它。其思想是更新表示状态的对象，以承诺的形式返回它，然后以快速的一行代码在本地更新状态

组件

import handleInputChange from "./utility"

class MyInputComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: {
                title: ""
            }
        };
    }

    render() {
        return (
            <input
                type="text"
                id="title"
                value={this.state.data.title}
                onChange={e => handleInputChange(e, this.state).then(res => {
                    this.setState(res);
                })}
            />
        )
    }
};

class MyInputComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: {
                title: ""
            }
        };
    }

    handleInputChange = event => {
        const { id, value } = event.target;

        this.setState({
            data: {
                ...this.state.data,
                [id]: value
            }
        });
    };

    render() {
        return (
            <input
                type="text"
                id="title"
                value={this.state.data.title}
                onChange={this.handleInputChange}
            />
        )
    }
};

它似乎工作正常，但问题是输入的光标总是跳到输入的末尾

如果我使用一个普通的本地输入处理程序，而不考虑是否干燥，那么它就可以正常工作。 例如，这项工作没有关于光标的问题：

组件

import handleInputChange from "./utility"

class MyInputComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: {
                title: ""
            }
        };
    }

    render() {
        return (
            <input
                type="text"
                id="title"
                value={this.state.data.title}
                onChange={e => handleInputChange(e, this.state).then(res => {
                    this.setState(res);
                })}
            />
        )
    }
};

class MyInputComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: {
                title: ""
            }
        };
    }

    handleInputChange = event => {
        const { id, value } = event.target;

        this.setState({
            data: {
                ...this.state.data,
                [id]: value
            }
        });
    };

    render() {
        return (
            <input
                type="text"
                id="title"
                value={this.state.data.title}
                onChange={this.handleInputChange}
            />
        )
    }
};

类MyInputComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：{
标题：“
}
};
}
handleInputChange=事件=>{
const{id，value}=event.target；
这是我的国家({
数据：{
…此.state.data，
[id]：值
}
});
};
render（）{
返回(
)
}
};

---

你知道为什么当我尝试干燥时会出现光标问题吗？承诺是否会延迟渲染，因此光标不知道去哪里？谢谢你的帮助。

我有点搞不懂你长远打算做什么。如果你想保持干燥，你的反应成分可能会是这样的

   render() {
    return (
        <input
            type={this.props.type}
            id={this.props.title}
            value={this.props.value}
            onChange={this.props.handleInputChange}
        />
    )
  }

---

从长远来看，我对你要做的事情有点困惑。如果你想保持干燥，你的反应成分可能会是这样的

   render() {
    return (
        <input
            type={this.props.type}
            id={this.props.title}
            value={this.props.value}
            onChange={this.props.handleInputChange}
        />
    )
  }

---

两者之间的区别在于，在

Promise

中，

setState

将在通过调度（micro）

任务完成当前执行帧后发生。对于
受控组件
，这似乎会改变浏览器的行为。我真的看不到你的
handleInput
函数的价值，但是你仍然可以使用函数组合并保持它的同步：
handle=（state，cb）=>（event）=>（event.preventDefault（）；cb（{state，event.target}）
（这可能是
onSubmit
道具的处理程序）两者之间的区别在于，在
Promise
中，
setState
将在通过调度a（micro）完成当前执行帧之后发生
任务
。在
受控组件
的情况下，这似乎会改变浏览器行为。我看不到
handleInput
函数的值，但您仍然可以使用函数组合并保持同步：
handle=（state，cb）=>（event）=>（event.preventDefault（）；cb({state，event.target}）
（这可能是
onSubmit
props的处理程序）。这是有道理的。这样做的唯一意义是因为我有15个组件，它们都执行相同的7-8行代码。因此，重复15次会让我感觉脏兮兮的。我不确定是否有一个好方法来保持我的组件干燥，但最终我必须在本地更改状态。是的，传递回拨或我添加的最后一段代码会有所帮助保持干燥uuuuonchange={e=>this.setState（handleInputChange（e，this.state））}谢谢！我不确定这是否会飞起来，这是一个糟糕的做法，等等。我试图变得太聪明。简单是最好的。这是有意义的。这样做的唯一意义是因为我有15个组件，它们执行相同的7-8行代码。所以重复15次感觉很脏。我不确定有什么好的方法来保持我的组件干燥最后，我必须在本地更改状态。是的，传递回拨或我添加的最后一段代码将帮助您保持干爽。更改={e=>this.setState（handleInputChange（e，this.state））}谢谢！我不确定这是否可行，这是一个糟糕的做法，等等。我试图变得太聪明。简单是最好的。