Redux表单提交值而不点击提交

时间:2017-08-21 21:18:19

标签: javascript reactjs ecmascript-6 redux

我很确定有一种方法可以使用onChange来实现这一点,但是在示例中:http://redux-form.com/6.0.0-alpha.4/examples/simple/这里是由redux表单提供的,当你点击下拉并点击一个值时它会自动提交值而不需要点击提交。

我复制了确切的代码并且一切正常,除了我必须选择我想要的所有值然后点击提交的事实。我们如何才能开始输入字段或选择一个值,然后自动提交。

如果您不想访问该链接,我会将代码放在下面。

import React from 'react'
import { Field, reduxForm } from 'redux-form'
const  { DOM: { input, select, textarea } } = React

const SimpleForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>First Name</label>
        <div>
          <Field name="firstName" component={input} type="text" placeholder="First Name"/>
        </div>
      </div>
      <div>
        <label>Last Name</label>
        <div>
          <Field name="lastName" component={input} type="text" placeholder="Last Name"/>
        </div>
      </div>
      <div>
        <label>Email</label>
        <div>
          <Field name="email" component={input} type="email" placeholder="Email"/>
        </div>
      </div>
      <div>
        <label>Sex</label>
        <div>
          <label><Field name="sex" component={input} type="radio" value="male"/> Male</label>
          <label><Field name="sex" component={input} type="radio" value="female"/> Female</label>
        </div>
      </div>
      <div>
        <label>Favorite Color</label>
        <div>
          <Field name="favoriteColor" component={select}>
            <option></option>
            <option value="ff0000">Red</option>
            <option value="00ff00">Green</option>
            <option value="0000ff">Blue</option>
          </Field>
        </div>
      </div>
      <div>
        <label htmlFor="employed">Employed</label>
        <div>
          <Field name="employed" id="employed" component={input} type="checkbox"/>
        </div>
      </div>
      <div>
        <label>Notes</label>
        <div>
          <Field name="notes" component={textarea}/>
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'simple'  // a unique identifier for this form
})(SimpleForm)

0 个答案:

没有答案