在轨道上做出反应：无法在我的表单输入框中输入文本

Question

当我尝试在网页上键入框时，它不会注册我正在键入任何内容。我猜它与handleChange或onChange有关，但我可以在这里使用一些帮助。我仍然是React的新手，并试图弄清楚它。我遗漏了什么?

import React, {Component} from 'react';
import { Form } from 'semantic-ui-react';
class Assessments extends Component {
state = {assessment_name: '', assessment_type: ''}
componentDidMount() {
if (this.props.id) {
const { assessment_name, assessment_type } = this.props
this.setState({ assessment_name, assessment_type })
}
}
handleChange = (a) => {
const { name, value } = a.target
this.setState({ [name]: value })
}
handleSubmit = (a) => {
a.preventDefault()
if (this.props.id) {
const { id, history } = this.props
this.props.updateName(id, this.state, history)
this.props.toggleUpdate()
}
this.props.close()
this.setState({ assessment_name: '', assessment_type: ''})
}
close = () => this.setState({ open: false })
render() {
const { assessment_name, assessment_type } = this.state
return(
<Form onSubmit={this.handleSubmit}>
<Form.Input
name=''
value={assessment_name}
onChange={this.handleChange}
label='Assessment Name'
required
/>
<Form.Input
name='AssessmentType'
value={assessment_type}
onChange={this.handleChange}
label='Assessment Type'
required
/>

<Form.Button>Submit</Form.Button>
</Form>
)
}
}
export default Assessments;

Answer 1

您没有将正确的names传递给handleChange函数用于更新状态的Form.Input组件。它们必须分别为'assessment_name'和'assessment_type'，以确保状态在输入更改事件时得到更新，并且新值反映在字段上。

<>
<Form.Input
name="assessment_name"
value={assessment_name}
onChange={this.handleChange}
label="Assessment Name"
required
/>
<Form.Input
name="assessment_type"
value={assessment_type}
onChange={this.handleChange}
label="Assessment Type"
required
/>
</>