使用按鈕控制Redux形式

我正在使用Redux-form來執行任務。此表單位於表單容器中。在表單容器或表單組件中。有兩個按鈕。一個添加按鈕和一個減號按鈕。形式組件是：使用按鈕控制Redux形式

import React from 'react' 
import { Field, reduxForm } from 'redux-form' 
import TextField from 'material-ui/TextField' 
import RaisedButton from 'material-ui/RaisedButton' 

const renderTextField = ({ input, label, meta: { touched, error }, ...custom }) => (
    <TextField hintText={label} 
       floatingLabelText={label} 
       errorText={touched && error} 
       {...input} 
       {...custom} 
    /> 
) 

const ActivityDetailForm = props => { 
    const { handleSubmit, pristine, reset, submitting,} = props 
    return (
     <form onSubmit={handleSubmit}> 
     <div> 
      <RaisedButton 
      type="submit" 
      disabled={pristine || submitting} 
      label="saveChange" 
      fullWidth={true} 
      secondary={true} 
      /> 
     </div> 
     </form> 
) 
} 

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

現在，我面臨的一個問題。當我點擊添加按鈕，

<div> 
     <Field name="field1" component={renderTextField} label="text1: "/> 
    </div>

上面的代碼將在form元素創建。

當我再次點擊添加按鈕，在div元件，它包括了Field命名field2將在form元素創建。

... Field命名field3 ... Field命名field4 ... Field命名爲field5 ... 當我點擊按鈕加減。最後的Field元素將被銷燬。

你知道解決這個問題的方法嗎？

來源

2017-04-13 jiexishede

我不完全清楚你想達到什麼目的。你想使用添加和減去按鈕來動態添加表單元素嗎？ – Dennis

@丹尼斯是的。如何使用FieldArray來實現它？ http://redux-form.com/6.6.3/docs/api/FieldArray.md/ – jiexishede

以下（未測試）是關於如何使用FieldArray實現動態輸入的一個非常基本的示例。你必須調整這一點，以適應你的具體情況。

const renderTextField = ({ input, label, meta: { touched, error }, ...custom }) => (
    <TextField hintText={label} 
       floatingLabelText={label} 
       errorText={touched && error} 
       {...input} 
       {...custom} 
    /> 
) 

const ActivityDetailForm = props => { 
    const { handleSubmit, pristine, reset, submitting,} = props 

    const renderFieldArray = ({ fields }) => (
    <div> 
     <div> 
     <RaisedButton 
      onTouchTap={() => fields.push({})} 
      label="Add" 
     /> 
     </div> 
     {fields.map((field, index) => (
     <div> 
      <div key={index}> 
      <Field 
       name={`${field}.name`} 
       label={`Text ${index + 1}`} 
       component={renderTextField} 
      /> 
      </div> 
      <div> 
      <RaisedButton 
       onTouchTap={() => fields.remove(index)} 
       label="Remove" 
      /> 
      </div> 
     </div> 
    ))} 
    </div> 
); 

    return (
    <form onSubmit={handleSubmit}> 
     <div> 
     <FieldArray 
      name="textFields" 
      component={renderFieldArray} 
     /> 

     <RaisedButton 
      type="submit" 
      disabled={pristine || submitting} 
      label="saveChange" 
      fullWidth={true} 
      secondary={true} 
     /> 
     </div> 
    </form> 
) 
} 

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

來源

2017-04-14 10:35:31 Dennis

使用按鈕控制Redux形式

回答

相關問題