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

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

Answer 1

从长远来看，我对您的工作感到有些困惑。如果您想变干，那么您的react组件可能看起来像这样

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

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

1 个答案: