reactstrap 相关问题

Bootstrap 4的无状态React组件。

reactjs通过表分页

我正在使用reactjs。我正在用api列出数据。我使用reactstrap表向用户显示我收到的数据。但我想分页。一页上最多显示6条记录,其他记录为...

回答 3 投票 0


正确格式化Bootstrap列? (偏移等)

当前,这是页面的外观:页 面的布局应为左侧的4张缩略图,然后在其右侧是带有信息框的大图像,然后是...] >

回答 2 投票 0

我正在尝试从最低级别组件上的输入字段捕获数据

我的状态位于我的APP级别组件中,并且我试图捕获放入表单组件中的数据。我正在使用挂钩,但是我无法弄清楚自己在做什么错!我尝试过...

回答 1 投票 0

反应:import'../node_modules/bootstrap/dist/css/bootstrap.min.css';错误

我正在使用reactstrap库,但是当我使用import'../node_modules/bootstrap/dist/css/bootstrap.min.css'时,已成功安装引导程序和reactstrap;反应不会编译。是否有...

回答 1 投票 0

如何获得Reactstrap的CustomInput Switch组件的状态,以及如何从阵列映射开关?

{this.props.diseases.map((疾病,索引)=>( []] 对于第1点,y您可以使用e.target.checked检查特定CustomInput的是/否状态;选中this stackblitz即可正常工作 对于第2点,如果您共享现有代码,则可以更轻松地帮助解决您的特定情况 相关 js : class App extends Component { constructor() { super(); this.state = { name: "World to React", log: [] }; this.customInputSwitched.bind(this); } customInputSwitched(buttonName, e) { let newStr = `we received ${e.target.checked} for ${buttonName}...`; console.log(newStr); let newLog = [...this.state.log, newStr]; this.setState({ log: newLog }); } render() { var testName = "modal for testing - click here"; return ( <div> <Hello name={this.state.name} /> <p>Start editing to see some magic happen :)</p> <Form> <FormGroup> <Label for="exampleCheckbox">Switches</Label> <div> <CustomInput type="switch" id="exampleCustomSwitch" name="customSwitch" label="Turn on this custom switch" onChange={this.customInputSwitched.bind(this, "button1")} /> <CustomInput type="switch" id="exampleCustomSwitch2" name="customSwitch" label="Or this one" onChange={this.customInputSwitched.bind(this, "button2")} /> <CustomInput type="switch" id="exampleCustomSwitch3" label="But not this disabled one" disabled /> <CustomInput type="switch" id="exampleCustomSwitch4" label="Can't click this label to turn on!" htmlFor="exampleCustomSwitch4_X" disabled /> </div> </FormGroup> </Form> {this.state.log} </div> ); } } UPDATE#1 :鉴于下面提问者的评论 https://stackblitz.com/edit/react-rcqlwq处的代码中的几个问题 您必须实例化构造器中的Log in状态 customInputSwitched函数应传递特定按钮的参数,而不是硬编码的“ button1”-因此我们添加疾病的索引号 所有按钮的ID不能是相同的'exampleCustomSwitch',因此我们只需将索引号添加到ID中>] 映射为数组的最佳实践是还包括一个索引,它有好处(如以下两点所示) 相关的工作JS用于您的代码/堆栈闪电: class App extends Component { constructor() { super(); this.state = { diseases: [ "Normal", "Over inflated lungs", "Pneumonia", "Pneumothorax", "Congestive cardiac failure", "Consolidation", "Hilar enlargement", "Medical device", "Effusion" ], log: [] }; this.customInputSwitched.bind(this); } customInputSwitched(buttonName, e) { let newStr = `we received ${e.target.checked} for ${buttonName}...`; console.log(newStr); let newLog = [...this.state.log, newStr]; this.setState({ log: newLog }); } render() { return ( <div> <p>Start editing to see some magic happen :)</p> <Form> <FormGroup> <Label for="exampleCheckbox">Switches</Label> {this.state.diseases.map((disease, index) => { //console.log(disease, index); let idName = "exampleCustomSwitch"+index; return ( <div key={index}> <CustomInput type="switch" id={idName} name="customSwitch" label={disease} onChange={this.customInputSwitched.bind(this, "button"+index)} /> </div> ); } )} </FormGroup> </Form> {this.state.log} </div> ); } }

回答 1 投票 0

import'../node_modules/bootstrap/dist/css/bootstrap.min.css';错误

我正在使用reactstrap库,但是当我使用import'../node_modules/bootstrap/dist/css/bootstrap.min.css'时,成功安装了bootstrap和reactrap;反应不会编译。是否有...

回答 1 投票 0

在React中在表上创建可扩展行的简单方法是什么?

我尝试查找此内容,但除了库之外,什么都没做,对于这样一个简单的任务来说有点大。我很好奇,如果你们中的任何人知道表行的onclick事件会扩展的简单方式...

回答 1 投票 0

[DropdownMenu and DropdownItem onClick with ReactJS / Reactstrap

我想拥有一个带有dropdownItem的dropdownMenu,当我单击一个项目时,它会显示参考项目。但是实际上,当我单击时,切换功能没有任何反应:处理下拉handleClick:...

回答 1 投票 1

使用酶/玩笑关闭后,retrapstrap模态中的含量仍然存在

我正在尝试用酶和开玩笑的方式进行一些测试,当我打开一个模态例如模态中的输入字段不存在,并且当我尝试...时模态状态为假(按预期)...

回答 1 投票 0

上校在Reactstrap

我刚开始先学习Reactstrap和我使用的7.1.0版本我用这个代码(文档以下), .COL-3

回答 2 投票 0

反应调用组件的功能,但功能丧失这个[复制]的定义

我有这样的代码,由于某种原因,当拨动被调用控制台提供未定义“this.state。”真的不知道发生了什么事情吧。 //切换模态打开或关闭视...

回答 2 投票 0

recharts IMG在定制点不渲染

我想从一个URL作为线图点渲染图像。我添加了“CharacterDot”就像它在文档中显示,但是不呈现任何内容。如果我使用相同的代码,但使用SVG的,而不是...

回答 1 投票 1

reactstrap导航栏图标不显示

我试图做一个导航栏,以我的反应,应用程序,我用这个代码:ReactStrap导航栏组件但是,导航栏图标不会出现在小型设备视图。小型设备导航栏(图标是不是...

回答 2 投票 0

如何设置reactstrap模头的中心内容?

我使用的是reactstrap莫代尔,有ModalHeader这里我显示我面临的问题,而我试图把这些内容在头的中心我content.But。后做检查元素我...

回答 1 投票 0

如何让我输入验证和禁用/启用我的提交按钮取决于ReactJS形式的状态

我使用NPM验证,并试图验证输入的信息,然后更改取决于验证提交地址按钮的状态。我的方式有它设置现在我打字和文本...

回答 1 投票 0

Reactstrap进展不渲染

我试图呈现一个进度条,并使用[email protected]按钮。按钮呈现其中的进度条不会被渲染。我在想什么?同时引导版本是4.2.1。进口...

回答 1 投票 0

与终极版ReactJS显示在SVG组件引导提示

我想显示在SVG组件的工具提示。对于提示,我想使用reactstap组件。如果我用正常的组件内部SVG它不呈现SVG组件。 getServiceStatus =(...

回答 1 投票 0

如何自定义引导4与reactstrap依赖reactjs应用程序?

我开始开发与reactstrap一个作出反应的应用程序。我跟着入门运行以下命令:NPM安装-g创建反应的应用程序内创建反应的应用程序内我的应用程序内的CD我的应用程序内/ NPM NPM开始安装...

回答 2 投票 2

React router4:在onClick链接组件上更新状态

我有一个Route组件,它将根据当前url呈现一行表,问题是我无法使用onClick更新状态我放在Link组件上,url已更改但状态为...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.