在更改事件上绑定文本输入值-React Native + Redux

Question

我正在React Native和Redux中创建表单。我添加了TextInput并且想在Reducer中更改该字段的状态。我遇到了麻烦，因为我不知道如何在(change) => this.setState({change})Redux架构中添加功能。我使用组合减速器，却不知道如何绑定该值。简而言之，我需要获得TextInputon change函数的默认行为，但必须使用Redux来实现。

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;

Answer 1

为了将值从TextInput传递给reducer，您需要更改dispatch函数：

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

并在您的减速器中将其更改为

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

  //Solution

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

希望它能工作..