Question

我正在尝试使用此example帮助创建原生反应表单。但handleSubmit无效。

Signup.js

submitForm(values){
 console.log("formValues",values);
}

nextPage(){
 this.setState({ page: this.state.page + 1 });
}

render(){
 const { page } = this.state;
 {page === 1 && <WizardFormFirstPage nextPage={this.nextPage} />}
 {page === 2 && <WizardFormSecondPage nextPage={this.nextPage} />}
 {page === 3 && <WizardFormThirdPage onSubmit={this.submitForm}  />}
}

WizardFormFirstPage和WizardFormSecondPage工作正常。但是当它出现在WizardFormThirdPage上时它没有做任何事情（我无法在终端中看到任何用于验证的控制台日志和submitForm函数）。这是编写的代码。

WizardFormThirdPage.js

const WizardFormThirdPage = props => {
const { handleSubmit, onSubmit } = props;
return (
 <View>
  <Field name="street" component={InputField} label="Street" />
  <Button style= {{ margin: 10 }} block primary onPress={handleSubmit(onSubmit)}>
    <Text>Continue</Text>
  </Button>
 </View>
 );
};
export default reduxForm({
 form: 'signup', //                 <------ same form name
 destroyOnUnmount: false, //        <------ preserve form data
 forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
 validate,
})(WizardFormThirdPage);

Answer 1

这可能为时已晚，但我发现自己做错了。

在将响应本机InputText组件与redux表单Field组件包装在一起时。我们必须将道具传递给InputText组件。我正在传递像这样的道具...

<InputText {...props} />

{... props}将所有事件处理程序（如onChange，onSubmit等）附加到组件，因此我们不必手动进行操作。问题出在这里，InputText组件具有 onChangeText 属性，而不是将 onChange 插入到道具中的 onChange 。

正确的方法是..

const renderInput = ({ input: { onChange, ...restInput }}) => {
  return <TextInput style={styles.input} onChangeText={onChange} {...restInput} />
}

const Form = props => {
  const { handleSubmit } = props

  return (
    <View style={styles.container}>
      <Text>Email:</Text>
      <Field name="email" component={renderInput} />
      <TouchableOpacity onPress={handleSubmit(submit)}>
        <Text style={styles.button}>Submit</Text>
      </TouchableOpacity>
    </View>
  )
}

此答案来自文章Simple React Native forms with redux-form。

React Native + Redux表单：向导表单handleSubmit

1 个答案: