如何创建具有多种状态的按钮？

Question

我是 React Native 的初学者，我需要一个按钮来拥有四个状态。

四种状态是接受、召回、开始和关闭。

它将按如下方式工作：

按“接受”-> 将变为“召回”

按“召回”-> 将变成“开始”

按“开始”-> 将变成“关闭”

每次按下按钮时，我都会将状态发送到我的数据库，以便保存所有操作，每个操作都在各自的小时、分钟和秒内。

我不知道如何做到这一点，所以我没有任何代码可以在这里发布，我做了一些研究，但我找不到正确的关键词来找到我需要的东西。

先感谢您。

Answer 1

这是一个关于 React 的实时示例（在 react-native 中它应该几乎相同） https://codepen.io/anon/pen/gNJOvL?editors=0010

class Button extends React.Component {
  state = {
    type: 'Accept'
  }

  types = ["Accept", "Recall", "Start", "Close"];

  doCall = (type) => {
    // requests here
    const nextType = this.types[this.types.indexOf(this.state.type) + 1];
    if (nextType) {
      this.setState({type: nextType});
    } else {
      // action you want to do if "Close" is pressed
    }
  }

  render() {
    const {type} = this.state;
    return (<button
              onClick={() => this.doCall(type)}
            >
              {type}
            </button>);
  }
}

React.render(<Button />, document.getElementById('app'));

Answer 2

假设按钮是表单的提交按钮，那么该表单必须包含一个隐藏的 <input tag with name='next_button_value'>...

你在用php吗？ 如果是这样， $_REQUEST["next_button_value"] 变量将包含您想要在按钮值处输出的内容...您还可以使用 if ($_REQUEST["nbv"] = = "blah") {如果是废话，就做你必须做的事... }