formValueSelector 始终 returns 未定义

Question

我有一个 HOC 和一个演示组件（一个带有 redux-form），我试图使用 formValueSelector 在 HOC 中获取输入值，但它总是给我 undefined

演示组件：

interface Props {
  onCreatePayoutPress: () => void
}

const submit = (values: any) => {
  console.tron.log('submitting form', values)
}

class PayoutView extends React.PureComponent<InjectedFormProps<{}, Props> & Props> {
  private renderPayoutInput = (field: any) => (
    <TextInput style={{fontSize: 17}} autoFocus={true} keyboardType={'number-pad'} onEndEditing={this.calculatePayout}/>
  )

  public render() {
    return (
      ...
      <Field name="payoutInput" type="text" component={this.renderPayoutInput}/>
      <Button style={{height:42, marginHorizontal: 15}}
        onPress={this.props.onCreatePayoutPress}>
          {'Pay out now'}
      </Button>
    )
  }
}

export default reduxForm<{}, Props>({
  form: 'PayoutForm'
})(PayoutView)

即使使用 onPress={handleSubmit(submit)} reactotron 日志也表明值为空对象 {}

HOC：

interface Props {
  createPayout: (identityID: string, payoutAmount: number) => void
  payoutAmount: number
}

const identityID = '...'

export default class PayoutScreen extends React.PureComponent<Props> {
public render() {
    return (
      <PayoutView
        onCreatePayoutPress={this._createPayout}
      />
    )
  }

  _createPayout = () => {
    const payoutAmount = this.props.payoutAmount;
    console.tron.log(this.props.payoutAmount)
    // payoutAmount here is always undefined
    this.props.createPayout(identityID, payoutAmount);
  };
}

const mapStateToProps = (state: ReduxState) => {
  const selector = formValueSelector('PayoutForm')
  const payoutAmount = selector(state, 'payoutInput')

  return {
    payoutAmount: selector(state, 'payoutInput')
  }
}

const mapDispatchToProps = (dispatch: ReduxDispatch) => ({
  createPayout: (identityID: string, payoutAmount: number) => dispatch(createPayout(identityID, payoutAmount)),
})

export const PayoutScreen = connect(
  mapStateToProps,
  mapDispatchToProps,
)(PayoutScreen)

减速器：

const rootReducer = combineReducers({
  ....
  form: formReducer
})

哪里错了？

Answer 1

您没有将 field.input 道具转发给基础 <TextInput>。

例如 here renderField 如何获得 <input {...input}。

通过这种方式，您可以 'connect' 您的文本输入与实际 Field

formValueSelector 始终 returns 未定义

formValueSelector always returns undefined

typescript

react-native

redux

redux-form