时间戳

首页 > 解决方案 > 我不断得到预期的“`onClick`监听器是一个函数，而不是一个`object`类型的值。” 错误，我不知道如何解决

javascript - 我不断得到预期的“`onClick`监听器是一个函数，而不是一个`object`类型的值。” 错误，我不知道如何解决

问题描述

import React from 'react';
import useState from './App';
import username from './App';
import setUsername from './App';
import setAppState from './App';

function LoginPage(props) {

 const onClick = () => {
    props.onLogin(setUsername);

  }

  return (
    <div className="chat-login-page-container">
     <div className="chat-login-page-controls-container">
       <h4>Set your username</h4>
        <input type="text" 
               placeholder="Username"
               value={props.username} 
               username={username}
               setUsername={username}
           
               onChange={props.onChange} />
           
        <button type="button" disabled={username.length === 0} onClick='onClick'>Log 
 in</button>
      </div>
    </div>
  );
}

export default LoginPage;

我一直试图用不同的变量来修复代码，并试图让它不是一个值，它只是不工作。我不知所措，不知道该怎么办。

标签： javascript

解决方案

  1. 首先，你应该对道具使用对象解构

    常量 {用户名，onChange，onLogin} = 道具；

  2. 在组件“按钮”中，该属性"onClick"需要一个函数。使用您的代码onClick='onClick'，该属性将获取字符串而不是函数。我不确定 onClick 函数应该做什么，但它应该看起来像这样：

<button type="button" disabled={username.length === 0} onClick={()=>{onLogin(setUsername}}>Log in</button>

推荐阅读