Reactjs React：呈现多个用户输入

我有一个包含多个输入的表单，我正在处理多个用户输入，但我希望在单击提交按钮时显示所有输入

提交输入时，我需要在代码中添加/更改什么以显示输入

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) {
alert(`Plan:  ` )
event.preventDefault()
}
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
        <div>
          <label class="label-title">
            Project Title:</label>
            <input name="title" id="title" type="text" onChange={this.handleChange}/>
            </div>
            <div>
          <label class="label-goal">
          Motivational Goal: </label>
          <input name="goal" id="goal" type="text" onChange={this.handleChange}/>
          </div>
          <div>
        <label class="label-tech">
        Technologies/tools:</label>
        <input name="tech" id="tech" type="text" onChange={this.handleChange}/>
        </div>
        <div>
      <label class="label-features">
      Features:</label>
      <input name="features" id="features" type="text" onChange={this.handleChange}/>
      </div>
      <div>
    <label class="label-details">
    Other details: </label>
    <input name="details" id="details" type="text" onChange={this.handleChange}/>
    </div>
          <input class="submit" type="submit" value="Submit" />
        </form>
      )
    }
  }

---

这些值存储在状态中，因此您可以

把手排气管{ 违约事件； 警报`Plan:\n${JSON.stringifythis.state，null，2}`； } 还是更明确的方法

把手排气管{ 常数{ 标题 球门 科技， 特征， 细节 }=本州； 违约事件； 警报`计划： 标题：${Title} 目标：${Goal} 技术：${Tech} 功能：${Features} 详细信息：${Details} `; }

---

非常感谢你，我使用了第二种方法，效果很好@加布里埃尔佩特里奥利