TextInput 中的 onChangeText 在 redux 中无法正常工作，无法输入

Question

我在屏幕上有一个custom TextInput，我正在尝试将文本存储在redux-store 中。但是，一旦我在自定义文本输入的onChangeText 中添加了 dispatch for redux，我就无法输入 TextInput。

我的自定义文本输入组件：

...
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);

使用自定义 textInput 的我的屏幕：

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，则键盘不会关闭，但我无法键入，因为它会自动退格或删除输入值。

这是我的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});
  };
};

非常感谢您的帮助。

Answer 1

您在每次状态更改时卸载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}
    />
  );
}