আপডেট: এই উত্তরটি পুরানো। পারলে মিশিন থেকে দূরে থাকুন। আমি তোমাকে সতর্ক করেছিলাম!
মিক্সিনস মারা গেছে। দীর্ঘ লাইভ কম্পোজিশন
প্রথমে, আমি এর জন্য সাব-কম্পোনেন্ট ব্যবহার করার চেষ্টা করেছি এবং FormWidgetএবং InputWidget। যাইহোক, আমি এই পদ্ধতিটি অর্ধেক করেই ছেড়ে দিয়েছি কারণ আমি উত্পন্ন ব্যক্তি inputএবং তাদের রাজ্যের উপর আরও ভাল নিয়ন্ত্রণ চেয়েছিলাম ।
দুটি নিবন্ধ যা আমাকে সবচেয়ে বেশি সাহায্য করেছে:
এটি প্রমাণিত হয়েছে যে আমার কেবল দুটি (বিভিন্ন) মিশ্রণ লিখতে হবে: ValidationMixinএবং FormMixin।
আমি তাদের কীভাবে আলাদা করেছি তা এখানে।
ValidationMixin
বৈধকরণ মিশ্রণটি আপনার রাজ্যের কয়েকটি বৈশিষ্ট্যে আপনার বৈধকরণকারীর ক্রিয়াকলাপ চালানোর জন্য সুবিধার পদ্ধতিগুলি যুক্ত করে এবং অ্যারেতে "ত্রুটিযুক্ত" বৈশিষ্ট্যগুলি সংরক্ষণ করে state.errorsযাতে আপনি সংশ্লিষ্ট ক্ষেত্রগুলি হাইলাইট করতে পারেন।
define(function () {
'use strict';
var _ = require('underscore');
var ValidationMixin = {
getInitialState: function () {
return {
errors: []
};
},
componentWillMount: function () {
this.assertValidatorsDefined();
},
assertValidatorsDefined: function () {
if (!this.validators) {
throw new Error('ValidatorMixin requires this.validators to be defined on the component.');
}
_.each(_.keys(this.validators), function (key) {
var validator = this.validators[key];
if (!_.has(this.state, key)) {
throw new Error('Key "' + key + '" is defined in this.validators but not present in initial state.');
}
if (!_.isFunction(validator)) {
throw new Error('Validator for key "' + key + '" is not a function.');
}
}, this);
},
hasError: function (key) {
return _.contains(this.state.errors, key);
},
resetError: function (key) {
this.setState({
'errors': _.without(this.state.errors, key)
});
},
validate: function () {
var errors = _.filter(_.keys(this.validators), function (key) {
var validator = this.validators[key],
value = this.state[key];
return !validator(value);
}, this);
this.setState({
'errors': errors
});
return _.isEmpty(errors);
}
};
return ValidationMixin;
});
ব্যবহার
ValidationMixinতিনটি পদ্ধতির আছে: validate, hasErrorএবং resetError।
এটি শ্রেণীর validatorsঅবজেক্টের সংজ্ঞা দেবে বলে প্রত্যাশা করে propTypes:
var JoinWidget = React.createClass({
mixins: [React.addons.LinkedStateMixin, ValidationMixin, FormMixin],
validators: {
email: Misc.isValidEmail,
name: function (name) {
return name.length > 0;
}
},
// ...
});
যখন ব্যবহারকারী সাবমিশন বোতাম টিপেন, আমি কল করি validate। একটি কল validateপ্রতিটি যাচাইকারী চালানো হবে এবং this.state.errorsবৈধতা যাচাইয়ের ব্যর্থ বৈশিষ্ট্যের কী রয়েছে এমন একটি অ্যারের সাথে পপুলেট করা হবে ।
আমার renderপদ্ধতিতে, আমি hasErrorক্ষেত্রগুলির জন্য সঠিক CSS ক্লাস উত্পন্ন করতে ব্যবহার করি । যখন ব্যবহারকারী ক্ষেত্রের মধ্যে ফোকাস রাখে, আমি resetErrorপরের validateকল পর্যন্ত ত্রুটি হাইলাইট অপসারণ করতে কল করি।
renderInput: function (key, options) {
var classSet = {
'Form-control': true,
'Form-control--error': this.hasError(key)
};
return (
<input key={key}
type={options.type}
placeholder={options.placeholder}
className={React.addons.classSet(classSet)}
valueLink={this.linkState(key)}
onFocus={_.partial(this.resetError, key)} />
);
}
FormMixin
ফর্ম মিশ্রণ ফর্ম রাজ্য পরিচালনা করে (সম্পাদনযোগ্য, জমা দেওয়া, জমা দেওয়া)। অনুরোধ প্রেরণের সময় আপনি ইনপুট এবং বোতাম অক্ষম করতে এবং এটি প্রেরিত হওয়ার সাথে সাথে নিজের দৃষ্টিভঙ্গি আপডেট করার জন্য এটি ব্যবহার করতে পারেন।
define(function () {
'use strict';
var _ = require('underscore');
var EDITABLE_STATE = 'editable',
SUBMITTING_STATE = 'submitting',
SUBMITTED_STATE = 'submitted';
var FormMixin = {
getInitialState: function () {
return {
formState: EDITABLE_STATE
};
},
componentDidMount: function () {
if (!_.isFunction(this.sendRequest)) {
throw new Error('To use FormMixin, you must implement sendRequest.');
}
},
getFormState: function () {
return this.state.formState;
},
setFormState: function (formState) {
this.setState({
formState: formState
});
},
getFormError: function () {
return this.state.formError;
},
setFormError: function (formError) {
this.setState({
formError: formError
});
},
isFormEditable: function () {
return this.getFormState() === EDITABLE_STATE;
},
isFormSubmitting: function () {
return this.getFormState() === SUBMITTING_STATE;
},
isFormSubmitted: function () {
return this.getFormState() === SUBMITTED_STATE;
},
submitForm: function () {
if (!this.isFormEditable()) {
throw new Error('Form can only be submitted when in editable state.');
}
this.setFormState(SUBMITTING_STATE);
this.setFormError(undefined);
this.sendRequest()
.bind(this)
.then(function () {
this.setFormState(SUBMITTED_STATE);
})
.catch(function (err) {
this.setFormState(EDITABLE_STATE);
this.setFormError(err);
})
.done();
}
};
return FormMixin;
});
ব্যবহার
এটি উপাদানটির একটি পদ্ধতি সরবরাহ করার প্রত্যাশা করে sendRequest:, যা একটি ব্লুবার্ড প্রতিশ্রুতি ফিরিয়ে দেয়। (এটি কিউ বা অন্যান্য প্রতিশ্রুতি গ্রন্থাগারের সাথে কাজ করার জন্য এটি সংশোধন করা তুচ্ছ ial
এটি সুবিধাজনক পদ্ধতি যেমন isFormEditable, isFormSubmittingএবং সরবরাহ করে isFormSubmitted। এছাড়া অনুরোধ বন্ধ লাথি একটি পদ্ধতি প্রদান করে: submitForm। আপনি ফর্ম বোতামের onClickহ্যান্ডলার থেকে কল করতে পারেন ।