Блог

У меня есть следующее:

 {inputFields.map((inputField, index) =gt; ( lt;Fragment key={`${inputField}~${index}`}gt; lt;Select classNamePrefix="select" ref={myRef} menuPortalTarget={document.body} styles={style} placeholder="Select Foods" name="Foods" value={inputField.foods} options={options} onChange={event =gt; handleInputChange2(index, event)} className="select selectNarrow" /gt;amp;nbsp;amp;nbsp; lt;NumberFormat inputRef={textInput} allowNegative={false} label="Quantity" customInput={TextField} variant="outlined" name="Quantity" value={inputField.Quantity} thousandSeparator={true} fixedDecimalScale="." decimalScale={2} fixedDecimalScale={true} onChange={event =gt; handleInputChange(index, event)} /gt;amp;nbsp;amp;nbsp; lt;IconButton size="small" aria-label="edit" onClick={() =gt; handleAddFields()}gt;lt;AddCircleIcon /gt;lt;/IconButtongt; lt;IconButton size="small" aria-label="edit" onClick={event =gt; handleRemoveFields(index, event)}gt;lt;RemoveCircleIcon /gt;lt;/IconButtongt;lt;br/gt; lt;/Fragmentgt; ))}  lt;IconButton size="small" aria-label="edit" onClick={() =gt; handleRemoveFieldsAll()}gt;lt;RemoveCircleIcon /gt;lt;/IconButtongt;  

 const handleRemoveFieldsAll = (index, event) =gt; {  const values = [...inputFields];  setInputFields(INITIAL_STATE);  values.splice(0);  myRef.current.select.clearValue();  console.log(values);  };  

Эта функция очищает массив (значения), который работает хорошо, но сохраняет пользовательский выбор, отображаемый в выборе.

Этот:

 myRef.current.select.clearValue();  

работает, если у них есть только один выбор во фрагменте. В противном случае это очищает последний выбор, но не очищает массив и т. Д.

Что я хочу сделать, так это также очистить предыдущую выбранную опцию и вернуть этому полю значение заполнителя.