Quantcast
Channel: How to set 3 different actions for one TextInput field react-native with redux - Stack Overflow
Viewing all articles
Browse latest Browse all 3

How to set 3 different actions for one TextInput field react-native with redux

0
0

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


Viewing all articles
Browse latest Browse all 3

Latest Images

Trending Articles





Latest Images