Javascript 反应和材料界面-提升按钮-如何实现始终禁用单击的按钮？

这是我的

按钮

组件代码：

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;

---

你需要以某种方式使用state，我想我会这样做：

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;

从“React”导入React；
从“物料界面/RaisedButton”导入RaisedButton；
常量样式={
按钮：{
差额：2，
填充：0，
最小宽度：1，
},
};
常量按钮=道具=>{
const arrayFromInput=props.array；
常量按钮数组=[]；
for（设i=1；i(
));
如果（arrayFromInput>0）{
返回{allButtons}；
}
返回；
};
类MyButton扩展了React.Component{
构造函数（）{
超级（）
this.state={disabled:false}
}
handleClick=（）=>{
this.setState（{disabled:！this.state.disabled}）
this.props.onClick（this.props.el）
}
render（）{
返回(
把手按钮选择零（el）}
/>
)
}
}
导出默认按钮；

---

我还没有测试过它，但希望它能指引您正确的方向。

您需要以某种方式使用state，我想我会这样做：

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;

从“React”导入React；
从“物料界面/RaisedButton”导入RaisedButton；
常量样式={
按钮：{
差额：2，
填充：0，
最小宽度：1，
},
};
常量按钮=道具=>{
const arrayFromInput=props.array；
常量按钮数组=[]；
for（设i=1；i(
));
如果（arrayFromInput>0）{
返回{allButtons}；
}
返回；
};
类MyButton扩展了React.Component{
构造函数（）{
超级（）
this.state={disabled:false}
}
handleClick=（）=>{
this.setState（{disabled:！this.state.disabled}）
this.props.onClick（this.props.el）
}
render（）{
返回(
把手按钮选择零（el）}
/>
)
}
}
导出默认按钮；

---

我还没有测试过它，但希望它能指引你正确的方向。

如果你只需要禁用它，你可以扩展

onClick={（）=>handleButtonSelectZero（el）}

像这样

onClick={（）=>{handleButtonSelectZero（el）；this.disabled=true}

编辑：修复丢失的{}
如果您只需要禁用它，您可以展开

onClick={（）=>handleButtonSelectZero（el）}

像这样
onClick={（）=>{handleButtonSelectZero（el）；this.disabled=true}

编辑：修复了丢失的{}
抱歉，但它在代码中抛出了一个错误：解析错误：意外标记，预期为“}”（致命）抱歉，但它在代码中抛出了一个错误：解析错误：意外标记，预期为“}”（致命）太好了，伙计，这对我帮助很大，对代码进行了一些更正，它现在可以工作了！好极了，伙计，这帮了我很大的忙，对代码做了一些修改，它现在可以工作了！