时间戳

首页 > 解决方案 > 是否可以通过使用 reactjs 给出 rows={3} 来拉伸输入字段

reactjs - 是否可以通过使用 reactjs 给出 rows={3} 来拉伸输入字段

问题描述

我正在使用 react-chips 将电子邮件显示到芯片“ https://www.npmjs.com/package/react-chips ”中。在这里，我的目标是拉伸芯片输入字段，如 rows={3} column={20}。但无法找到如何放弃反应芯片。是否可以扩展各自的领域？任何人都可以在这个查询中帮助我吗？

这是代码：

 <Container>
        <Modal trigger={<Button>Show Modal</Button>}>
          <Modal.Content>
            <Form>
              <strong>Email</strong>
              <Chips
                className="f_input"
                value={this.state.chips}
                onChange={this.onChange}
                suggestions={["Your", "Data", "Here"]}
                chipTheme={{
                  chip: {
                    border: "none",
                    borderBottom: "1px solid black"
                  },
                  chipRemove: {
                    fontWeight: "bold",
                    cursor: "pointer",
                    color: "green",
                    ":hover": {
                      color: "yellow"
                    }
                  }
                }}
              />
              <Form.Field
                transparent
                className="f_input"
                control={Input}
                label="Subject"
              />

              <TextArea placeholder="Email Format" />
            </Form>

            <Button>Send</Button>
          </Modal.Content>
        </Modal>
      </Container>

这是整个代码

谁能帮我扩展芯片输入字段？

标签： reactjs

解决方案

该Chips组件接受一个名为的道具theme，您可以在其中更改inputCSS。将此添加到您的Chips组件中并玩一下：

 theme={{
   chipsContainer: {
     width: "100%",
     minHeight: 150,
     display: "flex",
     flexWrap: "wrap",
     border: "1px solid #ccc",
     alignContent: "flex-start"
   },
   container: {
     flex: 1
   },
   input: {
     border: "none"
   }
 }}

在你的chipTheme你chip应该是这样的：

chip: {
  border: "none",
  borderBottom: "1px solid black",
  height: 24
}

参考：

推荐阅读