我正在从channel中学习React。最近,我偶然发现了here中的React Hooks。因此,我试图将基于类的组件转换为基于钩子的组件。这是基于类的组件:
import React, { Component } from 'react';
class AddNinja extends Component {
state = {
name: null,
age: null,
skill: null,
}
handleChange = e => {
this.setState({
[e.target.id]: e.target.value,
})
}
handleSubmit = e => {
e.preventDefault();
this.props.addNinja(this.state);
}
render() {
return (
<div>
<form onSubmit={ this.handleSubmit }>
<label htmlFor="name">Name: </label>
<input type="text" id="name" onChange={ this.handleChange } />
<label htmlFor="age">Age: </label>
<input type="number" id="age" onChange={ this.handleChange } />
<label htmlFor="skill">Skill: </label>
<input type="text" id="skill" onChange={ this.handleChange } />
<button>Submit</button>
</form>
</div>
)
}
}
这是我转换后的组件: https://codesandbox.io/s/n0lw4wo550?module=%2Fsrc%2FAddNinja.js
但是我遇到以下错误:
答案 0 :(得分:4)
反应挂钩在React v16.8.0
中可用。已将您的react和react dom版本更新为16.8.0
。
"react": "16.8.0",
"react-dom": "16.8.0",
这是更新了版本的代码:https://codesandbox.io/s/qq90900xr4