formValueSelector всегда возвращает неопределенное - PullRequest
Новая
       20

formValueSelector всегда возвращает неопределенное

0 голосов
/ 03 апреля 2019

У меня есть HOC и компонент представления (один с избыточной формой), я пытаюсь получить входное значение в HOC, используя formValueSelector, но оно всегда дает мне 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)} протоколы реактотрона указывают, что значения являются пустым объектом {}

СПЕЦИАЛЬНЫЙ: 

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
})

Где не так?

1 Ответ

2 голосов
/ 03 апреля 2019

Вы не пересылаете field.input реквизит на базовый <TextInput>.

См., Например, здесь , как renderField имеет <input {...input}.

Таким образом, вы можете «связать» ваш текстовый ввод с фактическим Field

...