Question

<ul className="list-unstyled">
    {fields.map((tier, index) => (
        <li key={index} className={tierClass(index)}>
            <div">
                <h4 className="magento-h5">
                    {editionTitle} ({edition}) Support Tier {index + 1}
                </h4>
                {fields.length > 1 && (
                    <button
                        type="button"
                        title="Remove Tier"
                        onClick={() => fields.remove(index) }>  
                    </button>
                )}
            </div>
            <div">
                <div>
                    <Field
                        name={`${tier}.monthly_period`}
                        id={`${tier}.monthly_period`}
                        component={RFSelect}
                        type="select"
                        label="Renewal Period"
                        options={renewalPeriodSelect}
                    />
                </div>

            </div>
            <Field
                index={`${tier}`}
                name={`${tier}.long_description`}
                type="text"
                component={RFRichTextArea}
            />
        </li>
    ))}        
</ul>

RFRichTextArea源自https://gist.github.com/erikras/5ca8dc618bae5dbc8faf7d2324585d01

fields.remove(index)将删除字段，但是具有RFRichTextArea组件的字段不会重新呈现。它保留了应该删除的值。 redux存储表单值正确，但呈现的内容不正确。

例如：如果我在数组中有2个字段集。

[ [value:'simple A'], //input field function component
    [value:'complex A'] //class component
]
[ [value:'simple B'],
  [value:'complex B']
]

然后删除第一个索引，我得到：

[ [value:'simple B'], // input field function component
    [value:'complex A'] //class component
]

经过更多研究，我缩小了范围。在我的RTF组件中：

componentWillReceiveProps(nextProps) { 
    this.state.value.setContentFromString(nextProps.input.value, "html");
}

状态已更新，但仍保留插入符号的位置。如果我将语句更改为this.setState({value: RichTextEditor.createValueFromString(nextProps.input.value, 'html')})，那会起作用，但是随后我放开了插入符号的位置。

Answer 1

在我的RTF组件RFRichTextArea中：

componentWillReceiveProps(nextProps) { 
    if(!nextProps.meta.active && this.state.value.toString('html') !== nextProps.input.value) {
        this.setState({value: RichTextEditor.createValueFromString(nextProps.input.value, 'html')})
    }
    else {
        this.state.value.setContentFromString(nextProps.input.value, "html");
    }
}

如何删除包含具有类组件的字段的FieldArray中的字段

1 个答案: