reactjs – redux-form正在刷新onSubmit页面
发布时间:2020-12-15 05:04:01 所属栏目:百科 来源:网络整理
导读:我有一个redux表单,提交时,导致整个浏览器页面刷新,这是不希望的… 我在这里做错了什么导致页面在提交时刷新?谢谢! Rate.js import React from 'react';import RateForm from '../../components/rate/RateForm';class Rate extends React.Component { hand
我有一个redux表单,提交时,导致整个浏览器页面刷新,这是不希望的…
我在这里做错了什么导致页面在提交时刷新?谢谢! 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组件.
用这个 <RateForm fields={fields} onSubmit={this.handleSubmit.bind(this)} /> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |