Bind text input value on change event - React Native + Redux

Question

I'm creating form in React Native and Redux. I added TextInput and want to change the state of this field in Reducer. I have a trouble, because I don't know how to add (change) => this.setState({change}) function to my Redux architecture. I use combine reducers and have no idea how to bind that value. Saying in short, I need to gain default behaviour of the TextInput on change function but I have to use Redux to do it.

Form.js

const mapDispatchToProps = dispatch => {
  return {
      changeNameInput: () => dispatch({type: 'CHANGE_NAME_INPUT'})
  };
};

const mapStateToProps = state => {
  return {
      change: state.changeNameInput.change
  };
};

class Form extends React.Component {
  render() {
    return (
      <View>
         <FormLabel>Name</FormLabel>
         <TextInput
            onChangeText={this.props.changeNameInput}
            value={this.props.change}
        />
      </View>
    );
  }
}

Reducer.js

const initialState = {
    change: 'Your name'
   };

   const changeinputReducer = (state = initialState, action) => {
     switch (action.type) { 
       case 'CHANGE_NAME_INPUT':

  //Problem

         return {...state, change: '????' };
        default:
         return state;
     }
   };

   export default changeinputReducer;

Neel Gala · Accepted Answer · 2018-02-09 14:23:30Z

7

For passing value from TextInput to reducer, you need to change in dispatch function:

const mapDispatchToProps = dispatch => {
  return {
      changeNameInput: (text) => dispatch({type: 'CHANGE_NAME_INPUT', text})
  };
};

and in your reducer change it to

const changeinputReducer = (state = initialState, action) => {
     switch (action.type) { 
       case 'CHANGE_NAME_INPUT':

  //Solution

         return {...state, change: action.text };
        default:
         return state;
     }
   };

Hope it worked..

answered Feb 9, 2018 at 14:23

Neel Gala

2,3901 gold badge21 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tunvir Rahman Tusher Over a year ago

Awesome.What makes different if i use onChangeText={this.props.changeNameInput.bind(this)}

Collectives™ on Stack Overflow

Bind text input value on change event - React Native + Redux

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related