In my TextInput field I called onChange action if text has been changed. It works very fine with redux.
But i need to add more actions:
onFocuse (if text payload === '0', then i need to change TextInput value to '')
onBlur (if text payload === '', then i need to change TextInput value to '0')
I don't have any idea. For example JQuery decision:
function addEventOnChange(obj){
jQuery('#'+obj).bind('keyup mouseup change',function(e){
change(document.getElementById(obj));
});
jQuery('#'+obj).click(
function(){//focusin
clears(document.getElementById(obj));
});
jQuery('#'+obj).blur(
function(){//focusout
backzero(document.getElementById(obj));
});
function clears(obj) {
if (obj.value == 0) {
obj.value = '';
}
}
function backzero(obj) {
if (obj.value == "") {
obj.value = 0;
}
}
My current action:
export const textInputChanged = (text) => {
return {
type: TEXTINPUT_CHANGED,
payload: text
};
};
Current reducer:
const INITIAL_STATE = {
textinput: '1000'
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case TEXTINPUT_CHANGED:
return { ...state, textinput: action.payload };
default:
return state;
}
};
Current App:
onTextInputChange(text) {
this.props.TextInputChanged(number(text));
}
render() {
const number = (text) => { // only for numbers input
if (text.match(',') !== null) {
text = text.replace(',', '.');
}
if (text.match(/[*.*][0-9]*[*.*]/) !== null) {
if (text.match(/\.$/)) {
text = text.replace(/\.$/, '');
} else {
text = text.replace(/[.]/, '');
}
}
return text.replace(/[^\d.]/g, '');
};
return (
<Card>
<TextInput
value={this.props.texinput}
onChangeText={this.onTextInputChange.bind(this)}
onFocus={ clears }
onBlur={ backzero }
/>
</Card>
const mapStateToProps = (state) => {
return {
textinput: state.form.textinput,
};
};
export default connect(mapStateToProps, {
TextInputChanged
})(App);
Decision smells like componentDidMount(), but I don't feel as well