如何以redux格式传递名称和值的输入id?

时间:2017-07-18 02:09:16

标签: reactjs redux react-redux redux-form

我正在使用redux-form教程之一,而且我无法找到有关如何在提交表单时正确传递输入ID的参考。目前,键值对提交很好,但是如果我想为每个输入添加id,我该如何实现呢?

demo

const renderField = (props) => (
<div>
<label>{props.label}</label>
<div>
  <input {...props.input} placeholder={props.label} type={props.type} id={props.id}/>
  {props.meta.touched && ((props.meta.error && <span>
  {props.meta.error}</span>) || (props.meta.warning && <span>
  {props.meta.warning}</span>))}
  </div>
</div>
)

const FieldLevelValidationForm = (props) => {
const { handleSubmit, pristine, reset, submitting } = props
return (
<form onSubmit={() => handleSubmit(this, props.id)}>
  <Field name="username" type="text"
    component={renderField} label="Username"
    id="user"
    validate={[ required, maxLength15 ]}
  />
  <Field name="email" type="email"
    component={renderField} label="Email"
    id="userEmail"
    validate={email}
    warn={aol}
  />
  <Field name="age" type="number"
    component={renderField} label="Age"
    id="userAge"
    validate={[ required, number ]}
    warn={tooOld}
  />
  <Field name="favoriteColor" component="select" id="userColor">
    <option value="ff0000">Red</option>
    <option value="00ff00">Green</option>
    <option value="0000ff">Blue</option>
  </Field>
  <div>
    <button type="submit" disabled={submitting}>Submit</button>
    <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
  </div>
</form>
)
}

0 个答案:

没有答案