问React:在卡片中呈现用户输入

EN

class Planning extends React.Component {
   constructor() {
     super()
     this.state = { 
       title: '',
       goal: '',
       tech: '',
       features: '',
       details: ''
    }

     this.handleChange = this.handleChange.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
   }

handleChange(event) {

this.setState({ 
  [event.target.name]: event.target.value 
})
}

handleSubmit(event) {
    const {
      title,
      goal,
      tech,
      features,
      details
    } = this.state;
    event.preventDefault();
console.log(`Plan
Title: ${title},
Goal: ${goal},
Technologies: ${tech},
Features: ${features},
Details: ${details}`)
}
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
        <div>
          <label className="label-title">
            Project Title:</label>
            <input name="title" placeholder="Mental Health Guidance Website" id="title" type="text" onChange={this.handleChange}/>
            </div>
            <div>
          <label className="label-goal">
          Motivational Goal: </label>
          <input name="goal" placeholder="To get a job as a Fullstack Web Developer" id="goal" type="text" onChange={this.handleChange}/>
          </div>
          <div>
...
          <input class="submit" type="submit" value="Submit" />
        </form>
      )
    }
  }