Обработка входных изменений в MOBX

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');

Я не уверен, что это решение нарушает правило, согласно которому вы не должны присваивать значения реквизиту.