Console.log无法使用我的react应用程序浏览器

Question

我正在尝试测试我的"登录"按钮是否工作，console.log显示在用户名和密码字段中输入的凭据。Myreact应用程序启动良好，并呈现用户名和密码字段供用户输入凭据。问题似乎只是console.log：/

我在下面控制台日志的login.js文件中有以下代码：

state = {
credentials: {username: '', password: ''}
}
Login = event => {
console.log('this.state.credentials');
}

我的login.js文件

import React, { Component} from 'react';
// Class components need a render function
class Login extends Component {
state = {
credentials: {username: '', password: ''}
}
Login = event => {
console.log('this.state.credentials');
}
inputChanged = event => {
const cred = this.state.credentials;
cred[event.target.name] = event.target.value;
this.setState({credentials: cred});
}

render() {
return (
<div>
<h1>Login user form</h1>
<label>
Username:
<input type="text" name="username"
value={this.state.credentials.username}
onChange={this.inputChanged}/>
</label>
<br/>
<label>
Password:
<input type="password" name="password"
value={this.state.credentials.password}
onChange={this.inputChanged} />
</label>
<br/>
<button onClick={this.login}>Login</button>
<button onClick={this.register}>Register</button>
</div>
);
}
}

export default Login;

我的App.js文件

import React from 'react';
import './App.css';
import Login from './components/login';
function App() {
return (
<div className="App">
<Login />
</div>
);
}
export default App;

我的Index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: xyz;

感谢您的帮助！

Answer 1

您实际上拼写错误了登录方法名称，您将方法名称声明为"登录"；，但是在onclick函数中引用为"；this.login"；小写。尝试更改它，它一定会起作用。

state = {
credentials: {username: '', password: ''}
}
login = event => {
console.log('this.state.credentials');
}