reactjs - 如何删除具有类组件字段的 FieldArray 中的字段

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
]

经过更多研究，我缩小了问题的范围。在我的富文本组件中：

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

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

标签： reactjsreact-reduxredux-form

Answer 1

在我的富文本组件中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");
    }
}