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

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;

标签： javascriptreactjs

Answer 1

您没有将names 传递给函数用于更新状态的Form.Input组件。handleChange它们必须'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
  />
</>