[英]React and material-ui - Raised Button - how to achieve always disabling the clicked buttons?
This is my Buttons
component code: 这是我的
Buttons
组件代码:
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const style = {
button: {
margin: 2,
padding: 0,
minWidth: 1,
},
};
const Buttons = props => {
const arrayFromInput = props.array;
const buttonsArray = [];
for (let i = 1; i <= arrayFromInput; i++) {
buttonsArray.push(i);
}
const handleButtonSelectZero = props.handleButtonSelectOne;
const allButtons = buttonsArray.map(el => (
<RaisedButton
key={el}
label={el}
style={style.button}
onClick={() => handleButtonSelectZero(el)}
/>
));
if (arrayFromInput > 0) {
return <div>{allButtons}</div>;
}
return <div />;
};
export default Buttons;
In material-ui docs is info that to achieve Raised Button disabled state we should add disabled={true}
to it. 在material-ui文档中,有信息要达到“升起按钮”禁用状态,我们应该向其添加
disabled={true}
。
My coding problem/question: 我的编码问题/问题:
What should I add to this component code to have particular Rasied Button get disabled after that particular button is clicked? 单击该特定按钮后,我应在该组件代码中添加什么以使其被禁用 ?
EDIT: 编辑:
SOLUTION:
解:
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const style = {
button: {
margin: 2,
padding: 0,
minWidth: 1,
},
};
const Buttons = props => {
const arrayFromInput = props.array;
const buttonsArray = [];
for (let i = 1; i <= arrayFromInput; i++) {
buttonsArray.push(i);
}
const handleButtonSelectZero = props.handleButtonSelectOne;
const allButtons = buttonsArray.map(el => (
<MyButton key={el} onClick={handleButtonSelectZero} el={el} />
));
if (arrayFromInput > 0) {
return <div>{allButtons}</div>;
}
return <div />;
};
class MyButton extends React.Component {
constructor() {
super();
this.state = { disabled: false };
}
handleClick = () => {
this.setState({ disabled: !this.state.disabled });
this.props.onClick(this.props.el);
};
render() {
return (
<RaisedButton
disabled={this.state.disabled}
key={this.props.el}
label={this.props.el}
style={style.button}
onClick={() => this.handleClick()}
/>
);
}
}
export default Buttons;
You need to use state somehow, i think i would do something like this: 您需要以某种方式使用状态,我想我会做这样的事情:
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const style = {
button: {
margin: 2,
padding: 0,
minWidth: 1,
},
};
const Buttons = props => {
const arrayFromInput = props.array;
const buttonsArray = [];
for (let i = 1; i <= arrayFromInput; i++) {
buttonsArray.push(i);
}
const handleButtonSelectZero = props.handleButtonSelectOne;
const allButtons = buttonsArray.map(el => (
<MyButton onClick={handleButtonSelectZero} el={el} />
));
if (arrayFromInput > 0) {
return <div>{allButtons}</div>;
}
return <div />;
};
class MyButton extends React.Component {
constructor() {
super()
this.state = { disabled: false }
}
handleClick = () => {
this.setState({ disabled: !this.state.disabled })
this.props.onClick(this.props.el)
}
render() {
return (
<RaisedButton
disabled={this.state.disabled}
key={this.props.el}
label={this.props.el}
style={style.button}
onClick={() => handleButtonSelectZero(el)}
/>
)
}
}
export default Buttons;
I have not tested it, but hopefully it can guide you in the correct direction. 我尚未对其进行测试,但是希望它可以指导您正确的方向。
If you just need to disable it you can expand the 如果您只需要禁用它,则可以展开
onClick={() => handleButtonSelectZero(el)}
like this onClick={() => {handleButtonSelectZero(el);this.disabled=true}};
像这样
onClick={() => {handleButtonSelectZero(el);this.disabled=true}};
EDIT: fixed missing {} 编辑:修复了丢失的{}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.