Question

我正在尝试使用此react-input-code

进行4位数字的身份验证

在输入更改时，我正在设置状态：usesrAuth，而我还有另一个静态状态：代码。当这两个状态匹配时，我想设置另一个状态：isAuthenticated为true。发生的情况是，当状态更改并且这两个状态相同时，isAuthenticated状态不会更改。您能帮我检查两个状态是否正确并更新第三个状态吗？

    $client = new Google_Client(['client_id' => $CLIENT_ID]);  
    $payload = $client->verifyIdToken($id_token);
    if ($payload) {
        $userid = $payload['sub'];
        // If request specified a G Suite domain:
        //$domain = $payload['hd'];
    } else {
        // Invalid ID
    }

从react-input-code组件更改时，将更新userAuth状态。

state = {
    userAuth: '',
    code: '1234',
    cart: [],
    currentItem: { 
        text: '',
        key: ''
    },
    isAuthenticated: false
}

当this.state.userAuth === this.state.code时，我想要实现的目标是这个。我想将状态设置为isAuthenticated：true，然后将根据此isAuthenticated状态显示/隐藏一些HTML。

<ReactCodeInput
    type='number'
    fields={4}
    onChange={ this.props.authInput } 
/>

// props passed function
handleAuthInput = (e) => {
    this.setState({
        userAuth: e
    })
}

让我知道如何实现这一目标？谢谢！

Answer 1

在更新状态时，您可以检查新的userAuth和code是否匹配，并在这种情况下将isAuthenticated设置为true。

示例

class App extends React.Component {
  state = {
    userAuth: "1234",
    code: "",
    isAuthenticated: false
  };

  onChange = e => {
    const { name, value } = e.target;
    this.setState(prevState => {
      const state = { ...prevState, [name]: value };
      state.isAuthenticated = state.userAuth === state.code;
      return state;
    });
  };

  render() {
    const { userAuth, code, isAuthenticated } = this.state;
    return (
      <div>
        <input name="userAuth" value={userAuth} onChange={this.onChange} />
        <input name="code" value={code} onChange={this.onChange} />
        <div>{isAuthenticated ? "Match!" : "No match"}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

当两个状态相同时运行setState

1 个答案: