如何将 React Rating 与 Redux Form 集成

Question

我有兴趣使用 React Rating 让我的用户提供 1-5 星评价。

Rating 组件渲染得很好，如下所示：

  <Rating />

我希望这个评级能力出现在 react redux-form 中。如何将 Rating 整合到我现有的表单中，该表单具有如下字段：

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

Answer 1

您可以将 react-rating 与 redux 表单集成，如下所示。 https://jsfiddle.net/sherin81/d82a1tao/ 的工作示例 - 单击提交按钮时将值记录在控制台中。

class Page extends Component {
  constructor(props) {
    super(props)
    this.renderField = this.renderField.bind(this)
  }

  renderField({ input, type }) {
    if(type=== 'text') {
            return (<input {...input}  type={type} />)
    } else {
      return (<div><Rating {...input} initialRate={parseInt(input.value)} /></div>)
    }           
  }
  render() {
    const { handleSubmit, onSubmit } = this.props
    return (
      <div>
        <Field
        name="rating"
        component={this.renderField}
        />
        <Field
        name="name"
        type="text"
        component={this.renderField}
        />
        <button type="submit" onClick={handleSubmit(onSubmit)}>Submit</button>
      </div>
    )  
    }
}

const MyTextFields = reduxForm({
  form: 'Page'
})(Page)

初始值可以如下设置。

 <MyTextFields initialValues={{ rating: 2, name: 'test' }} onSubmit={(values) => console.log(values)} />