Question

我正在将此项目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。

当我单击每个项目后的关闭按钮时，该项目将被删除。如何添加提示模型以要求用户在删除之前进行确认？

Answer 1

在单击项目时，将特定的ID发送到事件处理程序函数，并在状态中设置该值和ID，并且还将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>
      )
   }

在模态组件中，使用this.props访问itemId和itemValue，您可以使用确定或否按钮显示类似确定要删除this.props.itemValue的文本。当这些按钮中的任何一个单击时，您需要在yes和no按钮事件处理函数中调用resetModalFlag，例如

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

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

如何将确认事件“注入”到反应选择中？

1 个答案: