javascript - DRY react 输入处理导致光标跳转

Question

我试图稍微干燥一下我的 react 表单，所以我想将我的基本输入处理功能移动到实用程序模块并尝试重用它。这个想法是更新一个表示状态的对象，在 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 时会发生光标问题吗？ promise 是否会延迟渲染，因此光标不知道去哪里？感谢您的帮助。

Answer 1

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

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

通过这种方式，您可以传递所有内容，并且它保持无状态，并且所有内容都在高层组件中处理

但是，按照您要求的方式进行操作，您是否可以不使用如下所示的内容，并且不需要使用 promise 来返回对象？

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