Question

我需要一个有3种状态的按钮。

每个州都需要处理点击并发送一个值。

用例是：

非喜爱
收藏
乌伯喜爱

我尝试使用this.state.count + 1表示级别，但没有成功。我不确定这是最好的方法。

我使用const fill作为CSS值（颜色），我将传递给svg元素。

这是我的尝试，但它有限，因为checked只有2个状态（开/关），我需要3.它也在this codepen。

class Switch extends React.Component {
  constructor ( props ) {
    super( props );
    this.state = {
      checked: !!props.checked
    };
  }
  handleClick(e) {
        this.setState({
      checked: !this.state.checked
    });
  }

  render () {
    const fill = this.state.checked ? "#E1E0DD" : "#999999";
    return (
        <button className="switch" onClick={this.handleClick.bind(this)} >
      <svg width="100" height="100">
        <g>
          <path id="svg_2" d="m0,38l37,0l11,-38l11,38l37,0l-30,23l11,38l-30,-23l-30,23l11,-38l-30,-23l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill={fill} />
        </g>
      </svg>
            </button>
    );
  }
}

const App = () => (
    <div>
        <Switch checked={ true } />
    </div>
)

React.render( <App />, document.getElementById( "page" ) );

Answer 1

您的代码存在一些问题。

首先，不要从道具中派生出一个组件的状态 - 这是一种反模式。

其次，因为setState调用可以由React批处理，所以当你在以前的状态基础上建立新的状态时，你应该使用function(prevState, nextProps)参数来设置set而不是一个对象。

第三，正如上面的评论所提到的，你永远不会通过使用布尔值来获得三种状态。

我会实现这样的事情：

class TripleSwitch extends React.Component {
  constructor() {
    super();
    this.state = {
       favourite: 0
    }
  }

  handleClick() {
    this.setState((prevState) => ({
       favourite: (prevState.favourite + 1) % 3
    }));
  }

  render () {
    const { favourite } = this.state;
    const fill = favourite === 0 ? "#E1E0DD" :
                 favourite === 1 ? "#000444" : 
                 "#999999";
    return (
        <button className="switch" onClick={this.handleClick.bind(this)} >
      <svg width="100" height="100">
        <g>
          <path id="svg_2" d="m0,38l37,0l11,-38l11,38l37,0l-30,23l11,38l-30,-23l-30,23l11,-38l-30,-23l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill={fill} />
        </g>
      </svg>
            </button>
    );
  }
}

Answer 2

我分叉your codepen

布尔值为1或0.如果需要3个状态，则需要增加一个值。

  handleClick(e) {
    var count = this.state.count;
    count = count !== 3 ? count + 1 : 0;
    this.setState({
      count: count
    });
  }

您还应该将填充颜色的逻辑分开：

function fillColor(count) {
    var fill = "";
    if(count === 1) fill = "#E1E0DD";
    if(count === 2) fill = "#999999";
    if(count === 3) fill = "#000";
    return fill;
}

使用React的3个状态的按钮

2 个答案: