Question

比方说，我有两种形式，每种形式与一个单独的mobx商店有关。一种形式用于客户信息（名字，姓氏等），另一种形式用于员工信息。每个表单显然都有多个输入，用于更新相关商店中的可观察值。

在此示例中，我在每个商店中都有一个操作，该操作接收一个事件，并根据名称更新值：

@action handleInputChange = (e) => {
    this[e.target.name] = e.target.value
}

是否有一种方法可以将该操作抽象到一个包含常用操作的帮助程序文件中，而不必一次又一次地重新键入呢？

预先感谢，您可以想象，我对此很陌生。

Answer 1

有几种方法可以解决这个问题。在我的项目中，我只是编写了一个HOC（高阶组件）来实现这一点。

export default function asForm(MyComponent, formDataProp) {
    return @observer class Form extends Component {
        // constructor, etc.

        updateProperty(key, value) {
            this.props[formDataProp][key] = value;
        }

        // some other functions like double click prevention, etc.

        render() {
            return (
                <MyComponent
                    {...this.props}
                    updateProperty={this.updateProperty}
                    // some other props
                />
            );
        }
    };
}

然后像这样使用HOC：

@observer
class UserForm extends Component {
    render() {
        const { updateProperty, userInfo } = this.props;
        return (
            <div className="form-wrapper">
                <YourInputComponent
                    name="name"
                    updateProperty={updateProperty}
                    value={userInfo.name}
                    // other props
                />
            </div>
        );
    }
}

UserForm.propTypes = {
    userInfo: PropTypes.instanceOf(UserInfo),
    updateProperty: PropTypes.func.isRequired,
};

export default asForm(UserForm, 'userInfo');

我不确定该解决方案是否违反了您不应为道具分配值的规则。

处理Mobx中的输入更改

1 个答案: