最新消息:20210917 已从crifan.com换到crifan.org

【已解决】ReactJS中如何实现弹框中显示输入框

ReactJS crifan 4192浏览 0评论

需要在ReactJS中实现,在弹框中带输入框,允许用户输入文字

对于弹框之前是用weui.js实现的,比如:

weui.dialog

weui.toast

weui.alert

先去看看weui中是否有这种带输入框的弹框

react weui popup input

weui/react-weui: weui for react

没有找到。

急:Form 表单如何提交如何获取其中input的各字段的值 · Issue #122 · weui/react-weui

Input组件的defaultValue不能用变量? · Issue #232 · weui/react-weui

react js input inside popup

reactjs – Rendering react components inside popup of react-leaflet-draw drawn layer on react-leaflet – Stack Overflow

reactjs – Use Popup to display Input Error message in React-Semantic-UI – Stack Overflow

Modal | Semantic UI React

reactjs/react-modal: Accessible modal dialog component for React

How to focus on primary button when modal loads? · Issue #51 · reactjs/react-modal

Modal Dialogs in React

chentsulin/sweetalert-react: Declarative SweetAlert in React

->

sweetalert-react/examples at master · chentsulin/sweetalert-react

->

sweetalert-react/App.js at master · chentsulin/sweetalert-react

好像支持popup中input?

去试试

➜  ucowsapp_h5 git:(master) ✗ npm install sweetalert-react -S

npm WARN ucows-app@2017.9.21 No repository field.

npm WARN ucows-app@2017.9.21 No license field.

+ sweetalert-react@0.4.10

added 4 packages and removed 17 packages in 11.48s

去使用,结果出错:

【已解决】ReactJS导入sweetalert-react出错:rotate(45deg) \9; } Unrecognised input

代码:

import SweetAlert from ‘sweetalert-react’;

import ‘sweetalert/dist/sweetalert.css’;

state = {

    inputReasonIsShow: false,

};

  showInputCustomReason() {

    console.log(“showInputCustomReason”);

    this.setState({

      inputReasonIsShow : true

    });

  }

          <SweetAlert

            show={this.state.inputReasonIsShow}

            title=”手动输入未发情原因”

            text=”原因xxx”

            type=”input”

            inputType=”text”

            inputPlaceholder=”自定义未发情原因”

            onConfirm={inputValue => {

              console.log(`SweetAlert onConfirm: inputValue=${inputValue}`);

              this.setState({ inputReasonIsShow: false });

            }}

          />

        </div>

可以弹出,虽然和当前风格有点不一致:

然后去手机端试试能否正常输入。

但是发现个小问题

如果是使用:

onOutsideClick={this.onCustomReasonCancel}

则会导致一个问题:

滚动去选择是否发情的原因时:

弹框就消失了。

后来找到原因是:

在自定义输入框还没显示的时候,此时的onOutsideClick就已经生效了

解决办法是,继续参考example中的:

https://github.com/chentsulin/sweetalert-react/blob/master/examples/cancel/components/App.js

不用onOutsideClick,改用onCancel

去加上:showCancelButton和onCancel

import SweetAlert from ‘sweetalert-react’;

import ‘sweetalert/dist/sweetalert.css’;

export default class EstrusManagement extends Component {

  state = {

    inputReasonVisible: false,

    inputReasonValue: “”,

  }

      <SweetAlert

        show={this.state.inputReasonVisible}

        showCancelButton

        title=””

        text=”手动输入未发情原因”

        type=”input”

        inputType=”text”

        inputPlaceholder=”自定义未发情原因”

        onConfirm={this.onCustomReasonConfirm}

        onCancel={this.onCustomReasonCancel}

      />

  onCustomReasonCancel() {

    console.log(`onCustomReasonCancel`);

    this.setState({

      inputReasonVisible : false

    });

    this.cancelReasonAndProcessPick();

  }

才可以正常在点击了 其他后,再跳出弹框输入内容

【总结】

最后用代码:

<code>
import SweetAlert from 'sweetalert-react';
import 'sweetalert/dist/sweetalert.css';


render() {
  const {
    totalPending,
    activeSegment
  } = this.state;

  return (

      &lt;SweetAlert
        show={this.state.inputReasonVisible}
        showCancelButton
        title=""
        text="手动输入未发情原因"
        type="input"
        inputType="text"
        inputPlaceholder="自定义未发情原因"
        onConfirm={this.onCustomReasonConfirm}
        onCancel={this.onCustomReasonCancel}
      /&gt;

    &lt;/div&gt;
</code>

效果:

转载请注明:在路上 » 【已解决】ReactJS中如何实现弹框中显示输入框

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
92 queries in 0.187 seconds, using 23.37MB memory