小编Jim*_*cht的帖子

在 React 中动态创建按钮添加禁用属性

我有一个 QWERTY 键盘,通过组件动态呈现为通过 bootstrap-react 的 Bootstrap 按钮。他们没有 ID,我试图不在 React 中使用 ID 作为拐杖。

当单击其中一个字母时,它会通过 props 触发 onClick 事件,返回到我的 App.js。这很好用。我希望该按钮随后被禁用。因为它没有 ID,所以我无法执行 jQuery 类和数据值选择器,因为:React。

如何将该按钮属性更改为“禁用”(“禁用”是 React 中允许的 HTML 属性)。

import React from "react";
import {Button} from 'react-bootstrap';


const keyboard = props => {
return (
    <div>
        {props.keyboard.keys.map((item,index) => (
           <Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} value={item.toUpperCase()}> {item.toUpperCase()}
            </Button>
        ))}
    </div>
)
}

export default keyboard;
Run Code Online (Sandbox Code Playgroud)

到目前为止,我的点击事件正在按预期工作。理想情况下,我希望按钮更改为:

<Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} value={item.toUpperCase()} disabled> {item.toUpperCase()}</Button>

点击事件之后。

键盘是从我的 App.js 引用的,如下所示:

            <Panel header="Keyboard:">
                <Keyboard keyboard={this.keyboard.row1} click={(event) => …
Run Code Online (Sandbox Code Playgroud)

html javascript jsx reactjs react-bootstrap

6
推荐指数
2
解决办法
1万
查看次数

标签 统计

html ×1

javascript ×1

jsx ×1

react-bootstrap ×1

reactjs ×1