redux-form正在刷新页面onSubmit [英] redux-form is refreshing the page onSubmit
本文介绍了redux-form正在刷新页面onSubmit的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个redux表单,提交后会导致整个浏览器页面刷新,这是不希望的...
I have a redux form that when submitted, is causing the entire browser page to refresh which is not desired...
我在做什么错,导致页面在提交时刷新?
What am I doing wrong here to cause the page to refresh on submit?
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;
推荐答案
您需要通过引用名称onSubmit
将handleSubmit
作为处理程序传递给RateForm
组件.
You need to pass the handleSubmit
function as handler to the RateForm
component by the reference name onSubmit
.
使用此
<RateForm fields={fields} onSubmit={this.handleSubmit.bind(this)} />
这篇关于redux-form正在刷新页面onSubmit的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文