React on Rails：无法在我的表单输入框中输入文本

Question

When I try to type in the boxes on the webpage it doesn't register that I am typing anything. I am guessing it has something to do with the handleChange or onChange, but I could use some help here. I am still pretty new to React and trying to figure it out. What am I missing here?

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

You're not passing the right name s to the Form.Input components which the handleChange function uses to update the state. They have to be 'assessment_name' and 'assessment_type' respectively to make sure the state gets updated on input change events and the new values get reflected on the fields.

<>
  <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
  />
</>