如何使用redux-form FieldArray文本字段只讀取初始值，但不能在單擊新的field.push時讀取？

Question

我需要創建一個將數據加載到具有初始值的模態中的redux-form。其中一個字段（quoteField）應該在有初始數據時使用readOnly進行呈現。數據中至少還會有一個引號（initialValue），因爲這是一個要求。 但點擊一個新的報價，fields.push（{}）}，添加到形式應該是自由文本（不是隻讀）

我一直在使用readOnly的= {}質樸，只讀= {原始& &初步嘗試...等等...在組件中。這工作，直到我添加另一個領域; fields.push（{}）}或者如果我點擊另一個表單元素。此操作會使報價字段（使用初始值）再次可編輯。它應該保持readOnly。

我給了嘗試不同的變體：對象，但似乎沒有給我需要的功能。除了這個問題

// removed imports 

    class EditReduxForm extends React.Component { 

     constructor(props) { 
     super(props); 

// removed handlers and state 

     } 


// removed function for submitting 

     render() { 
     const { valueForPRI } = this.state; 
     const {fields:{addingName, quoteField}, array: { push }, handleSubmit, addCustom, onNewRequest, form, input, valid, reset, pristine, submitting } = this.props; 


     return (
      <span> 
       <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
        <Field name="addingName" component={formElement.renderName} value={valueForPRI} >{this.menuItemsPRI(valueForPRI)}</Field> 
        <FieldArray name="quoteField" component={formElement.renderEditQuote} /> // ***** <= this element ****** 
       {actions} <span className="require"> <span className="ast">*</span> required field</span> 
        <br/> 
       </form> 
      </span> 
     ); 
     } 

    }//end edit class 

    EditReduxForm = reduxForm({ 
     form: 'editForm', 
     fields: ['addingName', 'quoteField[]'], 
     enableReinitialize: true, 
     validate, 
    })(EditReduxForm); 


    EditReduxForm = connect(
     state => ({ 
     initialValues: { 
      addingName: state.loadFormValues.addingName, 
      quoteField : state.loadFormValues.quoteField, 
     } 
     }) 
    )(EditReduxForm) 

    export default EditReduxForm; 

和表單字段從另一個文件中拉 一切工作正常。

// removed imports 


     export const renderName = ({ field, input, label, type, meta: { touched, error, pristine}, children, ...custom }) => (
      <ul> 
       <li> 
       <Field 
        {...input} 
        component   ={SelectField} 
        onChange   ={(event, index, value) => input.onChange(value)} 
        children   ={children} 
        className   ="priorityAutoCompleter" 
        id     ="addingPriority" 
        errorText   ={touched && error } 
        {...custom} 
       /> 
       </li> 
      </ul> 
     ) 


     const renderEditQuote = ({ fields, field, input, value, label, type, meta: { pure, touched, error, pristine, dirty, initial}, children, ...custom, }) => (
      <ul> 
      <li> 
       <label htmlFor="quoteField">Quote(s)</label> 
       <IconButton 
        tooltipPosition  ="top-right" 
        onTouchTap   ={() => fields.push({})} 
       </IconButton> 
      </li> 
      {fields.map((quote, index) => 
      <ul className="quoteList" key={index}> 
       <IconButton 
        type    ="button" 
        tooltip    ="remove" 
        tooltipPosition  ="top-left" 
        className   ="floatRight marginRight" 
        onTouchTap   ={() => fields.remove(index)} 
       </IconButton> 
       <li className="quoteListLi"> 
       <Field 
        {...input} 
        component   ={TextField} 
        id     ="addingQuote" 
        name    ={`${quote}.addingQuote`} 
        type    ="text" 
        multiLine 
        errorText   ={touched && error } 
        children   ={children} 
        {...custom} 
        readOnly   ={ ????? } // // ***<= this element *** 
       /> 
       <span className="error">{error }</span> 
       </li> 
       <li> 
       <Field 
        {...input} 
        component   ={TextField} 
        name    ={`${quote}.addingLabel`} 
        id     ="addingLabel" 
        type    ="text" 
        onKeyDown   ={(event) => {if (keycode(event) === 'enter') { event.preventDefault() }} } 
        errorText   ={touched && error} 
        readOnly   ={ ????? } // // ** <= this element ** 
       /> 
       <span className="error">{error }</span> 
       <Field 
        {...input} 
        component   ={TextField} 
        name    ={`${quote}.addingSource`} 
        id     ="addingSource" 
        type    ="text" 
        onKeyDown   ={(event) => {if (keycode(event) === 'enter') {event.preventDefault() }} } 
        errorText   ={touched && error } 
        readOnly   ={ ????? } // *** <= this element ** 
       /> 
       <span className="error">{error }</span> 
       </li> 

       </ul> 
      )} 
      </ul> 
     ) 

Answer 1

對於這樣的事情，您可以嘗試強制Redux-Form爲您完成工作，但我建議您接管自己。

由於您描述的邏輯不需要與整體應用程序狀態以及組件狀態相關，因此我建議您沿着該路線行進。

我的意思是 - 你可以傳遞一個onChange處理您onTouchTap和禁用或啓用在你的領域的編輯和當onTouchTap被執行利用該本地組件的狀態，像this.setState({canEdit : true})。

Answer 2

我們有一個類似的要求，其中關鍵字段（不像其他字段）必須被寫入&只持續（到後端）一次。然而，它可以在「array push（）API和保存到後端」之間進行多次編輯。一旦保存到後端，它將變成readOnly/disabled field。

const TextCell = ({ 
    input, 
    label, 
    meta: { touched, error, visited }, 
    elStyle, 
    writeOnce, 
    ...custom 
}) => 
    <TextField 
    style={{ width: "100%" }} 
    hintText={label} 
    disabled={!visited && writeOnce && !!input.value} // ** This works for us ** 
    errorText={touched && error} 
    {...input} 
    {...custom} 
    /> 

上述組件將被初始化如下：

<Field 
    name={`${rowData}.${fieldName}`} 
    component={TextCell} 
    label={title} 
    writeOnce={true} 
/>