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

Question

我试图让我的反应形式变干一点，所以我想将我的基本输入处理功能移动到一个实用程序模块并尝试重用它。这个想法是更新一个代表状态的对象，return 它在 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

我对你在漫长的运行中试图做的事情有点困惑。如果你想要 DRY，你的 React 组件可能看起来像这样

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

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

但是按照您所要求的方式进行操作，您是否可以不使用类似下面的内容并且您不需要使用对 return 对象的承诺？

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

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

DRY react input handling causes cursor to jump

javascript

dry

reactjs