reactstrap 相关问题

{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> ); } }

reactjs bootstrap-4 frontend reactstrap

回答 1 投票 0

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

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

bootstrap-4 reactstrap

回答 1 投票 0

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

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

javascript reactjs reactstrap

回答 1 投票 0

[DropdownMenu and DropdownItem onClick with ReactJS / Reactstrap

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