Question

这是我的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;

在material-ui docs中，为了实现Raised Button禁用状态，我们应该向其添加disabled={true}。

我的编码问题/问题：

在点击该特定按钮后，我应该在此组件代码中添加什么特定的Rasied Button才能禁用？

修改

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;

Answer 1

你需要以某种方式使用状态，我想我会做这样的事情：

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;

我没有测试过，但希望它可以指导你正确的方向。

Answer 2

如果您只是需要禁用它，可以展开

onClick={() => handleButtonSelectZero(el)}

喜欢这个onClick={() => {handleButtonSelectZero(el);this.disabled=true}};

编辑：修复丢失{}

React和material-ui - 凸起按钮 - 如何实现始终禁用单击按钮？

2 个答案: