0

Есть форма с полем "добавить новую категорию" и "выбрать существующую" - тег "select". Через форму добавляю новую категорию. После добавления загружаю список всех категорий и изменяю состояние.

async loadCategories() {
    const response = await fetch('/api/product/getCategories');
    const data = await response.json();
    this.setState({ categories: data });
}

Сбрасываю поля формы и если поле newCategory не пустое меняю состояние newSelectOption

resetForm() {                  
    let newCat = this.newCategory.current.value;
    if (newCat != "") {
        this.loadCategories();
        this.setState({ newSelectOption: newCat });
        this.newCategory.current.value = "";
    }
 
    this.setState({ checkAddNewCat: false });
    this.setState({ errors: null });       
    this.setState({ file: [] });
    this.name.current.value = '';
    this.description.current.value = "";
    this.price.current.value = "";    
    this.fileInput.current.value = "";        
}

и задаю его defaultValue для тега

                    <label>
                    Категория:<br />
                    {errors ? <Error field="ThisCategory" errors={this.state.errors} /> : null}
                    {!this.state.checkAddNewCat && this.state.categories.length > 0 ?
                        <select
                            className="select-category"
                            defaultValue={this.state.newSelectOption}
                            ref={this.thisCategory}
                            >
                            {this.state.categories.map(el => (
                                <option key={el.id} value={el.name}>{el.name}</option>
                            ))}
                        </select>
                        : <span></span>
                    }           
                    
                    <div>
                        {errors ? <Error field="NewCategory" errors={this.state.errors} /> : null}
                        <input
                            type="text"
                            placeholder="создать категорию"
                            onChange={this.handleNewCategory}
                            ref={this.newCategory}/>
                    </div>                    
                </label>

но тег "select" остаётся на последнем значении которое было выбрано, а нужно что бы по умолчанию оно выбрало новое добавленное значение категории.

Кстати если в состояние newSelectOption подставить старое значение то все работает оно его выбирает после отправки формы, а новое значение которое было добавлено нет.

1 ответ 1

0

Вам надо указать новое добавление значение которое выбрал пользователь в select

<select id="exanple">
    <option>a</option>
    <option selected="selected">b</option>
    <option>c</option>
</select>

Так получается вы просто отрисовывайте по порядку всегда

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.