Question

我有一个HOC和一个表示组件（一个带有redux形式的组件），我正在尝试使用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)}个反应堆日志也表明这些值是空对象{}

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}的情况。

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

“连接”起来

formValueSelector始终返回未定义

1 个答案: