我有一个QWERTY键盘通过一个组件动态渲染,作为Bootstrap按钮通过bootstrap-react。他们没有ID,我试图不在React中使用ID作为拐杖。
当单击其中一个字母时,它会通过props触发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 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>
和click处理程序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;
它需要对组件进行一些重新处理,但需要考虑的一个简单方法是存储状态中所有关键项的映射(可以在父组件或键盘组件中),项目为键和布尔值因为他们重视。然后,在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属性添加到map函数中的按钮组件。您可能知道,在JSX中,您可以在括号内执行javascript,如{'first' + 'last'}
。因此,一旦从父组件状态向下传递了地图,只需将以下内容添加到按钮:
disabled={{keyboard.props.[whateverYouNameThisStateProp][item]}}
另外,不要忘记将key={}
属性设置为您要迭代的按钮的唯一值。
对不起,如果这有点混乱,请告诉我,如果我有什么不清楚的话!
React的工作方式与jQuery不同。以下是您需要采取的步骤,以实现您想要的目标:
class
组件以访问其状态。这是一些伪代码
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});
}
}