[英]Can't access props within function
我想在使用 axios 获取数据后访问 props 中的函数,但出现错误:
期望赋值或函数调用,却看到了一个表达式 no-unused-expressions
我可以在 jsx 中访问相同的函数,但是当我尝试从函数 / axios 调用它时它不起作用。 这是我的代码:
function LoginModal(props) {
let emailInput = React.createRef();
let passwordInput = React.createRef();
const getToken = (props) => {
axios.post('http://localhost:8000/api/token/', {
username: emailInput.current.value,
password: passwordInput.current.value
})
.then(function (response) {
props.closeModalHandler();
})
}
return (
<div className={styles.Background} onClick={props.closeModalHandler}>
<div className={styles.ModalContainer}>
<h2>Log in.</h2>
<div className={styles.InputContainer}>
<input type="text" className={styles.Input} ref={emailInput} />
<label htmlFor="" className={styles.ActiveLabel}>Email</label>
</div>
<div className={styles.InputContainer}>
<input type="password" className={styles.Input} ref={passwordInput}/>
<label htmlFor="" className={styles.ActiveLabel}>Password</label>
</div>
<button className={styles.LoginButton}
onClick={getToken}>Log me in</button>
<p>Forgot password? <br/>
Reset it <b>here</b>
</p>
</div>
</div>
)}
props
不会传递给onClick
处理程序(合成的 React 事件对象是)。 只需从getToken
参数列表中删除参数,它就会关闭传递给LoginModal
:
const getToken = () => {
// −−−−−−−−−−−−−−^^
axios.post('http://localhost:8000/api/token/', {
username: emailInput.current.value,
password: passwordInput.current.value
})
.then(function (response) {
props.closeModalHandler();
})
// *** Handle errors here -- you probably have to close the modal even
// when things go wrong...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.