redux-Form ist die Seite aktualisieren onSubmit

Question

ich eine redux Form haben, dass, wenn vorgelegt, wird die gesamte Browser-Seite verursacht zu aktualisieren, was nicht erwünscht ist ...

Was mache ich hier falsch machen die Seite zu veranlassen beim Senden aktualisieren? Vielen Dank!

Rate.js

import React from 'react'; 
import RateForm from '../../components/rate/RateForm'; 

class Rate extends React.Component { 

    handleSubmit(data) { 
    alert('x') 
    console.log('handleSubmit'); 
    console.log(data); 
    } 

    render() { 

    const fields = [ 
      { 
      name: 'execution', 
      type: 'select', 
      options: [ 
       { label: '5', value: '5' }, 
      ], 
      }, 
     ] 

    return (
     <div> 
     <RateForm fields={fields} handleSubmit={this.handleSubmit.bind(this)} /> 

     </div> 
    ) 
    } 
} 

export default Rate; 

RateForm.js

import React from 'react'; 
import { Field, reduxForm } from 'redux-form'; 

const renderField = ({ input, field }) => { 
    const { type, placeholder } = field 
    if (type === 'text' || type === 'email' || type === 'number' || type === 'checkbox') { 
    return <input {...input} placeholder={placeholder} type={type} /> 
    } else if (type === 'select') { 
    const { options } = field 
    return (
     <div> 
     <label>{field.name}</label> 
     <select name={field.name} onChange={input.onChange}> 
      {options.map((option, index) => { 
      return <option key={index} value={option.value}>{option.label}</option> 
      })} 
     </select> 
     </div> 
    ) 
    } else { 
    return <div>Type not supported.</div> 
    } 
} 

class RateForm extends React.Component { 

    render() { 
    return (
     <form onSubmit={this.props.handleSubmit}> 
     {this.props.fields.map(field => (
      <div key={field.name}> 
      <Field 
       name={field.name} 
       component={renderField} 
       field={field} 
       /> 
      </div> 
     ))} 
     <button type="submit">Submit</button> 
     </form> 
    ) 
    } 

} 

RateForm = reduxForm({ 
    form: 'rateForm' 
})(RateForm); 


export default RateForm; 

Answer 1

Sie benötigen onSubmit die handleSubmit Funktion als Handler die RateForm Komponente durch die Referenznamen zu übergeben.

verwenden

<RateForm fields={fields} onSubmit={this.handleSubmit.bind(this)} />