javascript - 如何从 React 组件中提取通用逻辑(但通用逻辑是使用 setState)

Question

背景

我正在构建一个带有 React 的应用程序。我已经使用 React 2.5 年了，但这是我第一次真正开始测试。因此，我从我的组件中删除了尽可能多的逻辑。其中大部分都非常简单，因为对于大多数逻辑来说，很容易用纯函数来思考。

问题

我发现自己在不同的组件中重复使用一种特定的方法，因为它是我的输入字段处理程序。在我第 3 次复制粘贴后，我认为一定有更清洁的解决方案。

我的函数

这个函数目前以完全相同的方式存在于我的 3 个组件中

/**
 * @description
 * Returns a function that updates the state form
 *
 * @param {String} stateKey - key in the state to update
 * @returns {Function}
 */
@autobind
updateInputValue (prop) {
    return (event) => {
        this.setState({ [prop]: event.target.value });
    }
};

我尝试过的

我试图将它提取出来并将 this 像变量一样传递给它，它起作用了，但我想知道是否有更简洁的方法来做到这一点。

/**
 * @description
 * Returns a function that updates the state of the filter form
 *
 * @param {Object} componentThis - The components context
 * @param {String} stateKey - key in the state to update
 * @returns {Function}
 */
function updateInputValue (componentThis, stateKey) {
    return (event) => {
        componentThis.setState({ [stateKey]: event.target.value });
    }
}

然后在你刚刚做的输入中

<Input id="foo"
       value={this.state.foo}
       onChange={updateInputValue(this, 'foo')} />

关于通过这个感觉有些不对劲(或者至少对某些破坏开放)，我想知道这个问题是否有其他解决方案？

Answer 1

所以我实际上已经在我的另一个项目中完成了这个。我对待它就像在本地设置状态时有一个来自 redux 的 reducer 和一个被调用的函数，给定状态并返回整个状态以再次设置。

这使得跨不同组件的测试和重用变得极其容易。你可以找到这个 open sourced here

我正在执行此操作的项目是一个表，因此如果我想转到下一组数据，我将执行以下操作。

(我确实稍微简化了这个例子)

import { nextPage } from '../actions/tableActions'

nextPage() {
    this.setState(currentState => {
        return nextPage({ state: currentState })
    });
};

在我的 tableActions.js 文件中它看起来像

export const nextPage = ({ state }) => {
    const { currentPage } = state.pagination;

    return changePage({ ...state, currentPage: currentPage + 1 })
};

现在写一个测试就这么简单。

it('should update the currentPage to the next page', () => {
    const given = {
        state: {
            pagination: {
                currentPage: 2,
            },
        }
    };
    const expected = {
        pagination: {
            currentPage: 3,
        },
    };

    expect(actions.nextPage(given)).toEqual(expected);
});