javascript - 如何跟踪 react 中的表单变化以进行分析

Question

我正在使用react、redux 和redux-saga。现在的问题是我想跟踪所有用户与表单的交互，例如焦点时间戳、他输入的内容以及他提交的时间。我想要一个通用组件来为我完成上述所有事情。这个怎么做。提前致谢

Answer 1

我不同意这是中间件的完美用例。跟踪是用户交互的副作用，与 redux 无关，因为发送分析数据不会影响应用程序状态。

您可能想要某种 HOC <TrackableInput>其中有 onChange 的事件处理程序, onFocus等，并且这些处理程序中的每一个都会在分派(dispatch)像 INPUT_CHANGE_VALUE 这样的操作之前触发分析请求，作为副作用。 。将跟踪和管理应用程序状态的关注点分开。

const trackFormEvent = (type, value = null) => {
    console.log('Track form event of type', type, 'with value:', value);
    // Do actual tracking request in here.
};

class TrackableInput extends React.Component {
    onChange = (changeEvent) => {
        const { value } = changeEvent.target;
        trackFormEvent('change', value);
        this.props.onChange(value);
    };

    onFocus = (focusEvent) => {
        trackFormEvent('focus');
        this.props.onFocus(focusEvent);
    };

    onBlur = (blurEvent) => {
        trackFormEvent('blur');
        this.props.onBlur(blurEvent);
    };

    render() {
        return (
            <input
                {...this.props}
                onChange={this.onChange}
                onFocus={this.onFocus}
                onBlur={this.onBlur}
            />
        );
    }
}