Запустите setState, когда 2 состояния совпадают
Я пытаюсь выполнить четырехзначную аутентификацию, используя этот код ввода-реакции.
При изменении ввода я устанавливаю состояние: usersrAuth, и у меня есть другое статическое состояние: code. Я пытаюсь добиться, когда эти два состояния совпадают, я хочу установить другое состояние: isAuthenticated в true. Что происходит, когда состояние изменяется, и эти два состояния совпадают, состояние isAuthenticated не меняется. Можете ли вы помочь мне, как я могу проверить правдивость 2 состояний и обновить 3-е состояние?
state = {
userAuth: '',
code: '1234',
cart: [],
currentItem: {
text: '',
key: ''
},
isAuthenticated: false
}
При изменении компонента react-input-code обновит состояние userAuth.
<ReactCodeInput
type='number'
fields = {4}
onChange = { this.props.authInput }
/>
// props passed function
handleAuthInput = (e) => {
this.setState({
userAuth: e
})
}
Я пытаюсь добиться этого, когда this.state.userAuth === this.state.code. Я хочу установить состояние isAuthenticated: true, которое затем покажет/скроет некоторый HTML в зависимости от этого состояния isAuthenticated.
state = {
userAuth: '1234',
code: '1234',
isAuthenticated: false
}
Дайте мне знать, как я могу этого добиться? Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>