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

Posted 2023-02-21

【中文标题】在 React 中为动态创建的按钮添加禁用属性

【英文标题】：Adding Disabled Attribute to dynamically created Button In React

【发布时间】：2018-05-29 05:08:05

【问题描述】：

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

当单击其中一个字母时，它会通过道具触发 onClick 事件，返回到我的 App.js。这工作正常。我希望该按钮随后被禁用。因为它没有 ID，我不能做一个 jQuery 类和数据值选择器，因为：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;

到目前为止，我的点击事件按预期工作。理想情况下，我希望 Button 更改为：

<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) => this.keyboardClickHandler(event)
                />
                <Keyboard keyboard=this.keyboard.row2 click=(event) => this.keyboardClickHandler(event)/>
                <Keyboard keyboard=this.keyboard.row3 click=(event) => this.keyboardClickHandler(event)/>
                <div id="messages">this.messages</div>
            </Panel>

点击处理程序控制台按预期记录值：

keyboardClickHandler = (event) => 
console.log(event.target.value)

*** 编辑：

我有点破解它，因为我无法通过超级组件将事件数据传回。我恢复到一个简单的组件，并添加了一个包含布尔值状态的键数组，并在组件内部进行检查以查看它是否应该被禁用。

        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;

【参考方案1】：

React 的工作方式肯定与 jQuery 不同。为了实现您想要的，您需要执行以下步骤：

将您的组件转换为class 组件以访问其状态。 在您的点击事件中，将禁用状态变量设置为 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);
  

【讨论】：

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

您可以通过简单地将event 作为参数添加到您的onButtonClick 函数然后调用this.props.click(event.target.value) 来解决event.target.value 问题

@JimReinknecht 您也可以在 React 中访问该事件。我已经编辑了我的答案以反映这一点

【参考方案2】：

它需要对您的组件进行一些修改，但想到的一种直接方法是将状态中的所有关键项（可能在父组件或键盘组件中）存储一个映射，并将该项作为键和一个布尔值，因为它们的值。然后，在您的 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);
    

然后，您可以将此状态对象作为道具传递给键盘，并为地图函数中的每个按钮访问项目的相应值。最后，您需要将 disabled 属性添加到地图功能中的按钮组件。您可能知道，在 JSX 中，您可以像 'first' + 'last' 那样在括号内执行 javascript。因此，一旦您从父组件状态传递了地图，只需将以下内容添加到您的按钮：

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

另外，不要忘记将 key= 属性设置为您正在迭代的按钮的唯一值。

抱歉，如果这有点杂乱无章，如果我有什么不清楚的地方，请告诉我！

【讨论】：

一点也不杂乱无章。实际上，我曾短暂地认为这样的事情是一种返工，但没有考虑。