reactjs – How to integrate React Rating w Redux Form

بدون دیدگاه


I’m interested in using React Rating to allow my users to provide 1-5 star reviews.

The Rating component renders fine like so:

  <Rating />

I would like this Rating ability to appear within react redux-form. How can I integrate Rating within my existing form which has fields like so:

let fields = {}

const fieldoptions = {
  type: 'select',
  options: [
    {},
    { label: '1', value: '1' },
    { label: '2', value: '2' },
    { label: '3', value: '3' },
    { label: '4', value: '4' },
    { label: '5', value: '5' },
  ]
};

….

const renderField = ({input, field, label, meta: {submitFailed, touched, error, pristine}}) => {
  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 className={classNames("form-group", {
        "has-danger": (submitFailed && error) || (!pristine && touched && error),
        "has-success": !pristine && touched && !error
      })}>

        <label>{field.name}</label>

        <div>
          <select name={field.skill_id} onChange={input.onChange} className={touched ? (error ? "form-control form-control-danger" : "form-control form-control-success") : "form-control"}>
            {options.map((option, index) => {
              return <option key={index} value={option.value}>{option.label}</option>
            })}
          </select>
          {touched && error && <span className="form-control-feedback">{label} {error}</span>}
        </div>
      </div>
    )
  } else {
    return <div>Type not supported.</div>
  }
}


    {this.props.fields.map(field => (
      <div key={field.skill_id}>
        <Field
          name={ 'skill_id_' + field.skill_id }
          component={renderField}
          field={field}
          />
      </div>
    ))}



لینک منبع

برچسب‌ها: ,,,,,
  • نویسنده
    A-brand
  • تعداد بازدید
    18 views
0دیدگاه فرستاده شده است.
شما هم دیدگاه خود را بنویسید