我使用了redux form - Fieldarray来创建动态表单。 当我添加一个过滤器添加一个字段时，我的疑问是，当我从下拉列表中选择一个值时，相同的值不应该填充在另一个选择字段中。请参阅图像
enter image description here enter image description here
<form onSubmit={handleSubmit(filterSubmit)}>
{fields.map((member, index) => {
return (
<div className="c-popover__body g-block" key={index}>
<ul className="g-list g-list--borders g-list-display">
<li className="g-list__item list_item_flt">
<fieldset className="c-form__field">
<Field
name={`${member}.field`}
type="select"
component="select"
label="Last"
className="o-select"
onChange={removeSelectedField}>
<option value=""></option>
{allFieldDisplay.map((each, index) => (
<option value={each.fieldValue} key={index}>{each.fieldName}</option>
))}
</Field>
</fieldset>
</li>
<li className="g-list__item list_item_flt m-top">
<button className="o-btn o-btn--neutral o-btn--tooltip js-modal-trigger" onClick={() => toggleFilterPattern(index + 1)} type="button" aria-label="Settings" data-modal="alert-settings">
<svg title="Settings" className="o-icon ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 14" id="settings-icon" width="100%" height="100%"><title>Settings</title>
<path d="M9.455 3.28a2.216 2.216 0 0 0-1.31 0V1a.655.655 0 1 1 1.31 0v2.28zm0 4.167V13a.655.655 0 1 1-1.31 0V7.447a2.216 2.216 0 0 0 1.31 0zM8.8 7.016a1.66 1.66 0 0 1-1.67-1.652c0-.912.746-1.653 1.67-1.653.924 0 1.67.741 1.67 1.653A1.66 1.66 0 0 1 8.8 7.016zm-5.945-.463a2.216 2.216 0 0 0-1.31 0V1a.655.655 0 1 1 1.31 0v5.553zm0 4.167V13a.655.655 0 1 1-1.31 0v-2.28a2.216 2.216 0 0 0 1.31 0zm-.655-.431c-.924 0-1.67-.741-1.67-1.653A1.66 1.66 0 0 1 2.2 6.984c.924 0 1.67.74 1.67 1.652 0 .912-.746 1.653-1.67 1.653z" transform="translate(.349)"></path></svg>
</svg>
</button>
</li>
<li className="g-list__item list_item_flt m-top">
<fieldset className="c-form__field">
<Field name={`${member}.value`} component="input" type="value" placeholder="value"
className="o-input" />
</fieldset>
{/* <fieldset className="c-form__field">
<div className="c-form__sub-field">
<label className="o-label" htmlFor="fromDate">From</label>
<input className="o-input o-input--date js-datepicker" type="date" id="fromDate" data-format="DD/MM/YYYY" />
</div>
<div className="c-form__sub-field">
<label className="o-label" htmlFor="fromTime">At</label>
<input className="o-input o-input--time" type="time" id="fromTime" step="1" />
</div>
</fieldset> */}
</li>
<li className="g-list__item list_item_flt m-top">
<button className="o-more-btn c-horizontal-card__more-btn js-popover-trigger filter-option"
onClick={() => toggleFilterRemove()}>
<span className="u-visually-hidden">Actions</span>
</button>
</li>
</ul>
{isFilterPatternVisible && filterPatternIndex === index + 1 && <div className="g-radio-buttons popup-list" key={index}>
<fieldset className='o-radio-button'>
<Field component="input" type="radio" className="o-radio-button__input" id="exactMatch" name={`${member}.match`} value="exactMatch" />
<label htmlFor="exactMatch" className="o-radio-button__label">Exact Match</label>
</fieldset>
<fieldset className='o-radio-button'>
<Field component="input" type="radio" className="o-radio-button__input" id="contains" name={`${member}.match`} value="contains" />
<label htmlFor="contains" className="o-radio-button__label">Contains</label>
</fieldset>
<fieldset className='o-radio-button'>
<Field component="input" type="radio" className="o-radio-button__input" id="startsWith" name={`${member}.match`} value="startsWith" />
<label htmlFor="startsWith" className="o-radio-button__label">Start with</label>
</fieldset>
<fieldset className='o-radio-button'>
<Field component="input" type="radio" className="o-radio-button__input" id="endWith" name={`${member}.match`} value="endWith" />
<label htmlFor="endWith" className="o-radio-button__label">End with</label>
</fieldset>
</div>
}
<div className={`c-popover js-popover is-ready ${isfilterRemove ? '' : 'is-hidden'}`} data-container=".js-content__scrollable" style={{ top: '121px', left: '385px' }}>
<div className="c-popover__body">
<div className="c-actions-list">
<ul className="c-actions-list__list">
<li className="c-actions-list__item">
<button className="o-btn o-btn--inline" type="button" onClick={() => {
fields.remove(index);
toggleFilterRemove()
}}>
Delete </button>
</li>
</ul>
</div>
</div>
</div>
</div>
)
})}
<div className="c-popover__primary-actions">
<button type="button" onClick={() => fields.push({})}
className="o-btn o-btn--neutral js-popover-trigger has-popover-displayed">
+ Add filter
</button>
{fields.length > 0 && <button className="o-btn o-btn--inline u-accent-color g-float" type="submit">
Apply
</button>}
</div>
</form>
// onchange事件都会触发。我试图从值中获取并使用选择选项值交叉检查这些值并分隔所有选定的值。
const removeSelectedField = () => {
let fields = [];
_map(allFormValues.filter, (each) => {
_map(allFieldDisplay, (list) => {
if (each.field === list.fieldValue) {
fields.push(list);
}
})
})
unSelectedField = _differenceWith(unSelectedField, fields)
this.setState({ allUnselectedFields: unSelectedField })
}
提前致谢