如何使用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} 
/>