onChangeText в TextInput не работает должным образом с redux, невозможно ввести - PullRequest
Новая
       98

onChangeText в TextInput не работает должным образом с redux, невозможно ввести

0 голосов
/ 08 мая 2020

У меня на экране custom TextInput, и я пытаюсь сохранить текст в redux-store. Но я не могу ввести TextInput после того, как я добавил dispatch для сокращения в onChangeText пользовательского ввода текста.

My Custom TextInput Component: 


...
import {connect} from 'react-redux';
import {onChangeText} from '../store/actions/saveThreadActions';

function CustomTextInput(props) {
  // Styled Components
  const CreateInput = styled.TextInput`
    ${typography.heading2}
    padding: 20px 24px 20px 16px;
    background-color: ${colors.background};
  `;
  return (
    <CreateInput
      {...props}
      onChangeText={text => props.onChangeText(text)}
      value={props.createText}
      scrollEnabled={false}
      returnKeyType="done"
      maxFontSizeMultiplier={1.5}
      placeholder="Create"
      selectionColor={colors.foregroundText}
    />
  );
}

const mapDispatchToProps = dispatch => {
  return {
    onChangeText: text => dispatch(onChangeText(text)),
  };
};

const mapStateToProps = state => {
  return {
    createText: state.saveThread.createText,
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(CustomTextInput);

Мой экран, на котором используется пользовательский ввод текста: 

import {connect} from 'react-redux';
function Screen(props){
   return (
       ...
       <CustomInput />
       <Button title="Create" onPress={() => console.log(props.createText)} />
       ...
   );
}

const mapStateToProps = state => {
  return {
    createText: state.saveThread.createText,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onChangeText: text => dispatch(onChangeText(text)),
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Screen);

Я вообще не могу печатать.

Как только я начинаю печатать, клавиатура снова отключается, потому что textinput наследует значение props.createText от redux. Если я удалю value prop, клавиатура не будет go опущена, но я не могу печатать, так как она автоматически возвращает или удаляет входное значение.

Это мой reducer: 

const initState = {
  createText: null,
};

const saveThreadReducer = (state = initState, action) => {
  switch (action.type) {
    case 'ON_CHANGE_TEXT':
      return {...state, createText: action.text};
    default:
      return state;
  }
};

export default saveThreadReducer;

Это мой action: 

export const onChangeText = text => {
  return (dispatch, getState) => {
    dispatch({type: 'ON_CHANGE_TEXT', text: text});
  };
};

Помощь будет очень рада.

1 Ответ

0 голосов
/ 08 мая 2020

Вы отключаете input при каждом изменении состояния, поэтому вы теряете фокус и не можете печатать. 

const CreateInput = styled.input`
  ${props => props.typography.heading2}
  padding: 20px 24px 20px 16px;
  background-color: ${props => props.colors.background};
`;

function CustomTextInput(props) {
  return (
    <CreateInput
      {...props}
      onChangeText={(text) => props.onChangeText(text)}
      value={props.createText}
    />
  );
}
...