在浏览器中显示html而不在文本框中显示 [英] showing html in the browser but not the textbox

问题描述

update1 :已更新图片，以更好地理解

update1: updated image for better understanding

我正在尝试实现类似于googleflights的芯片过滤器.现在，当您选择运动"时，它将显示"sports1"，它将由"sports1"代替"sports1".

I am trying to implement chip filters similar to googleflights. Right now when you select sports it will show sports1 it will replace sports by sports1.

但是，我想插入一个文本框，当我在文本框中输入somevalue并按 Enter 时，主要费用表的值应更改为输入的值.

However, I wanted to insert a textbox, when I enter somevalue in the textbox and hit Enter the primary fee schedule value should change to the entered value.

你能告诉我如何解决吗?

Can you tell me how to fix it?

与芯片相关的代码位于芯片选择器和tab-demo中 因为如果我输入文本框标记.我只是得到字符串

chip related code is in chip-selector and tab-demo since if I enter textbox tag. I am just getting string

推荐答案

您使用的Menu的工作方式与您要实现的目的略有不同.实际上，在研究Google Flights如何使用这些过滤器时，似乎他们正在使用Chips和Dialog组件来产生结果.使用Dialog组件后，您可以自己定义内容.

You are using Menu which works a little differently than what you are trying to achieve. Actually looking into how Google Flights is using these filters, it seems like they are using Chips and Dialog components to produce that result. Once you use a Dialog component, you can define the content yourself.

我已经在此处创建了一个沙箱

我将您的代码转换为Dialog而不是Menu.

I converted your code to take Dialog instead of Menu.

<div>
        <Chip
          style={{ display: this.state.display ? "" : "none" }}
          label={this.state.chipName}
          onDelete={this.handleDelete}
          className={this.props.classes.chip}
          color="primary"
        />

        <Button
          style={{ display: this.state.display ? "none" : "" }}
          aria-owns={anchorEl ? "simple-menu" : undefined}
          aria-haspopup="true"
          onClick={this.handleClick}
        >
          {this.props.buttonName}
        </Button>

        <Dialog
          onClose={this.handleClose}
          aria-labelledby="simple-dialog-title"
          open={this.state.openDialog}
        >
          <DialogTitle id="simple-dialog-title" style={titleStyle}>
            Set backup account
          </DialogTitle>
          <div>
            <input type="text" placeHolder="type here" />
            <List>{menuItems}</List>
          </div>
        </Dialog>
      </div>

menuItems返回ListItem而不是MenuItems.在沙盒中找到完整的代码.

menuItems returns ListItem instead of MenuItems. Find the full code in the sandbox.

您要获取的input应该在List之前.您可以按照自己想要的任何方式进行处理.

The input you are trying to get should be before the List. You can handle that any way you want.

我还没有覆盖Dialog的CSS属性.因此，一旦覆盖了背景的背景色和对话框的位置，就应该同时获得显示效果.

I haven't overridden the CSS properties for Dialog. So, once you override the backdrop background color and position of the dialog, you should achieve the display as well.

这篇关于在浏览器中显示html而不在文本框中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！