Javascript 向React中动态创建的按钮添加禁用属性

我有一个QWERTY键盘，通过一个组件动态呈现为引导按钮。他们没有身份证，我尽量不把身份证当作反应的拐杖

当点击其中一个字母时，它会通过道具触发onClick事件，返回到我的App.js。这个很好用。我希望那个按钮被禁用。因为它没有ID，所以我不能执行jQuery类和数据值选择器，因为：React

如何将buttons属性更改为Disabled（Disabled是react中允许的HTML属性）

***编辑：

我在那里入侵了它，因为我无法通过超级组件将事件数据传回。我返回到一个简单的组件，添加了一个状态为包含布尔值的键数组，并在组件内部检查是否应该禁用它

        status: {
            q: false,
            w: false,
            e: false,
            r: false,
            t: false,
            y: false,
            u: false,
            i: false,
            o: false,
            p: false

和组件：

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


const keyboard = props => {

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

export default keyboard;

从“React”导入React；
从“react bootstrap”导入{Button}；
常量键盘=道具=>{
返回(
{props.keyboard.keys.map（（项目，索引）=>{
让状态=道具.键盘.状态[项目]
返回(
{item.toUpperCase（）}
)
}
)
}
)
}
导出默认键盘；

React的工作原理肯定不同于jQuery。以下是您需要采取的步骤，以实现您的目标：

• 将组件转换为

  类

  组件以访问其状态
• 在单击事件中，将禁用的状态变量设置为true
• 在渲染函数中，使用该变量禁用按钮

下面是一些伪代码

class keyboard extends React.Component {

  constructor(props) {
    super(props);
    // Set your initial disabled state here
    this.state = {
      buttonDisabled: false
    };

    // Bind your click handler
    this.onButtonClick = this.onButtonClick.bind(this);
  }

  render() {
    return <Button onClick={this.onButtonClick} disabled={this.state.buttonDisabled} />;
  }

  onButtonClick(event) {
    // call your existing click event
    this.props.click(event);

    // Disable your button here
    this.setState({buttonDisabled: true});
  }

}

类键盘扩展React.Component{
建造师（道具）{
超级（道具）；
//在此处设置初始禁用状态
此.state={
按钮禁用：false
};
//绑定你的点击处理程序
this.onButtonClick=this.onButtonClick.bind（this）；
}
render（）{
返回；
}
onButtonClick（事件）{
//调用现有的单击事件
此.props.click（事件）；
//在这里禁用您的按钮
this.setState（{buttonDisabled:true}）；
}
}

这需要对组件进行一些修改，但想到的一个简单方法是存储状态中所有关键项的映射（可以在父组件或键盘组件中），该项作为键，布尔值作为值。然后，在onClick处理程序中，可以传递项键，并将给定键的状态设置为false

首先，让我们将onClick处理程序更改为

onClick={item => props.onClick(item)}

然后在父组件中，或在决定定义状态和onClick处理程序的任何位置：

    // parent component
    constructor(props) {
        super(props);
        this.state = {
            a: false,
            b: false,
            ...
        }

    onClick(itemKey) {
        this.setState({ itemKey: false});
    }

然后，您可以将此状态对象作为道具传递给键盘，并为地图功能中的每个按钮访问相应的项目值。最后，需要将禁用属性添加到映射函数中的按钮组件中。您可能知道，在JSX中，可以在括号内执行javascript，如so

{'first'+'last'}

。因此，一旦从父组件状态传递了映射，只需更改将以下内容添加到按钮：

disabled={{keyboard.props.[whateverYouNameThisStateProp][item]}}

另外，不要忘记为正在迭代的按钮将

key={}

属性设置为唯一值

---

抱歉，如果有点混乱，请告诉我是否有任何不清楚的地方

谢谢你，先生。这会产生一个新的半问题，但我会做一些挖掘（event.target.value显然没有被传递回App.js），但你让我走上了一条新的轨道！您只需将

event

作为参数添加到

onbutton中，单击
函数，然后调用
this.props。单击（event.target.value）
@jimreinknech即可解决event.target.value问题。您也可以在React中访问该事件。我编辑了我的答案，以反映这一点，一点也不混乱。事实上，我曾短暂地认为这是一个返工，但驳回了它。
onClick={item => props.onClick(item)}

    // parent component
    constructor(props) {
        super(props);
        this.state = {
            a: false,
            b: false,
            ...
        }

    onClick(itemKey) {
        this.setState({ itemKey: false});
    }

disabled={{keyboard.props.[whateverYouNameThisStateProp][item]}}