【问题标题】:Redux-form: update/change two fields values at onceRedux-form:一次更新/更改两个字段值
【发布时间】:2018-02-09 07:49:11
【问题描述】:

我想在 Redux-Form 中一次更改表单的两个字段值。 存在一种更改方法,但它只允许更改一个字段。 请问有什么方法可以一次更改多个字段值吗?

例如。

Fields:
  - patternType
  - color

我想同时设置两个字段。

【问题讨论】:

  • 嘿!怎么样了?您自己找到解决方案了吗?很高兴听到我的回答是否有用,或者我是否误解了您的问题。

标签: reactjs redux redux-form


【解决方案1】:

您可以将 onChange 回调传递给 Field 组件,并与更改操作一起您可以:

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const TwoFieldsForm = props => {
  const { handleSubmit, change } = props
  return (
    <form onSubmit={handleSubmit}>
          <Field
            name="someField"
            component="input"
            type="text"
            onChange={(event, newValue) => change("otherField", newValue)}
          />
    </form>
  )
}

export default reduxForm({
  form: 'form' 
})(TwoFieldsForm)

docs

【讨论】:

    【解决方案2】:

    不确定是否有更好的方法,但如果您想要两个更改两个输入的值,则此方法有效,仅基于一个更改:

    const Form = ({change, dispatch}) => {
        const onFirstChange = (event) => {
          const text = event.target.value;
          // make change actions for both inputs
          const changeFirst = change('first', text);
          const changeSecond = change('second', text + text.toUpperCase());
          // dispatch them for both
          dispatch(changeFirst);
          dispatch(changeSecond);
      };
      return (<div>
        First: <Field name='first' component='input' type='text' onChange={onFirstChange} /><br />
        Second: <Field name='second' component='input' type='text' />
      </div>
        )
    };
    
    const MyForm = reduxForm({
      form: 'foo'
    })(Form);
    
    // END EXAMPLE
    ReactDOM.render(
        <Provider store={store}>
        <MyForm />
      </Provider>,
      document.getElementById('root')
    );
    

    JSFiddle 演示https://jsfiddle.net/jonahe/399cpnz1/1/

    【讨论】:

    • 您使用了两次更改调用,这不是解决方案
    • 我明白你为什么这么说。这取决于您如何阅读问题。这是两个调用,但它们仅由一个 onChange 事件触发,因此对于用户而言,两个输入将“立即”更新。不幸的是,jsfiddle 链接现在似乎已损坏,但在我发布时它工作得很好。
    猜你喜欢
    • 1970-01-01
    • 2018-08-31
    • 1970-01-01
    • 1970-01-01
    • 2017-12-27
    • 1970-01-01
    • 2018-05-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多