對於 redux，TextInput 中的 onChangeText 無法正常工作，無法輸入

Question

我在屏幕上有一個custom TextInput ，我正在嘗試將文本存儲在redux-store中。 但是，一旦在自定義文本輸入的onChangeText中添加了 redux 的dispatch ，我就無法輸入 TextInput。

我的自定義 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 ，那么鍵盤不會 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});
  };
};

幫助將非常感激。

Answer 1

您在每個 state 更改上卸載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}
    />
  );
}