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

Question

我有一个 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;

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

<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>

点击处理程序 console.logs 预期的值：

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;

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

}

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

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

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

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

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