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

admin管理员组

文章数量:1391951

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 bine 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;

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 bine 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;

• javascript
• forms
• reactjs
• redux

Share Improve this question Follow asked Feb 9, 2018 at 14:10 ItalikItalik 69633 gold badges2020 silver badges3737 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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..

本文标签： javascriptBind text input value on change eventReact NativeReduxStack Overflow