加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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)} />

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读