как «вставить» подтверждение события в реагировать на выбор? - PullRequest
Новая
       10

как «вставить» подтверждение события в реагировать на выбор?

0 голосов
/ 06 октября 2018

Я использую этот проект https://github.com/JedWatson/react-select для выбора компонента.Я использую его для визуализации компонента с множественным выбором.Ниже приведен пример кода: 

import Async from 'react-select/lib/Async';

<Async
                    className="user-select"
                    classNamePrefix="user-select"
                    defaultValue={this.state.defaultValue}
                    defaultOptions
                    isClearable={false}
                    loadOptions={this.loadOptions}
                    isMulti
                />

ниже скриншот.Он отображает два элемента Purple и Red.

enter image description here

Элемент будет удален при нажатии кнопки закрытия после каждого элемента.Как добавить подсказку для запроса подтверждения от пользователя перед удалением?

1 Ответ

0 голосов
/ 06 октября 2018

при щелчке по элементу отправьте этот конкретный идентификатор в функцию-обработчик событий и установите это значение и идентификатор в состоянии, а также установите для setState значение modal значение true, чтобы показать модель при нажатии на элемент

Вы также делаетеОбязательно установите для showModal значение false, когда пользователь нажимает «Да» или «Нет» в модальном режиме, чтобы оно работало в следующий раз, когда вы захотите удалить другой элемент. 

constructor(props){
     super(props);
     this.state = {
        itemId: 0,
        showModal: false,
        itemValue: ""
     }
   }

   handleItem = event => {
      this.setState({
         itemId: event.target.id,
         showModal: true,
         itemValue: event.target.value
      });
   }

   resetModalFlag = () => {
        this.setState({
            showModal: false
        })
   }

   render(){
      const { showModal, itemId, itemValue } = this.state;
      return(
          <div>
             <Select onChange={this.handleItem} />
             {showModal && <Modal id={itemId} itemValue={itemValue}  resetModalFlag={this.resetModalFlag} />}
          </div>
      )
   }

В доступе к модальному компоненту itemId и itemValue используя this.props, и вы можете показывать текст, как вы уверены, что хотите удалить this.props.itemValue С помощью кнопки да или нет.Когда нажата одна из этих кнопок, вам нужно вызвать resetModalFlag в функциях yes и no, таких как 

  handleYesButton= () =>{
       this.props.resetModalFlag();
  }

  handleNoButton= () =>{
       this.props.resetModalFlag();
  }
.
...