我有兴趣使用React Rating允许我的用户提供1-5星评价。
评级组件呈现如下:
<Rating />
我希望此评级能力出现在react redux-form中。如何在现有表单中集成评级,其中包含如下字段:
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>
))}
答案 0 :(得分:1)
您可以将反应等级与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)} />