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

Question

我试图稍微干掉我的反应表单，所以我想将我的基本输入处理功能移动到一个实用程序模块并尝试重用它。这个想法是更新一个表示状态的对象，在 Promise 中返回它，然后在本地快速更新状态。

组件

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);
                })}
            />
        )
    }
};

utility.js

export const handleInputChange = (event, state) => {
    const { id, value } = event.target;
    return Promise.resolve({
        data: {
            ...state.data,
            [id]: value
        }
    });
};

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

如果我使用普通的本地输入处理程序并且忽略 DRY，那么它可以正常工作。 例如，这对光标没有问题：

组件

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}
            />
        )
    }
};

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

Answer 1

从长远来看，我对你想要做的事情有点困惑。如果你想变干，也许你的反应组件可能看起来像这样

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

这样你传入所有内容，它保持无状态，并且所有内容都在高组件中处理

但是按照您要求的方式，您是否可以不使用类似下面的内容，并且您不需要使用承诺来返回对象？

onChange={e => this.setState(handleInputChange(e, this.state))}