React：在卡片中呈現用戶輸入

Question

我在當前打印到控制台的表單中有多個用戶輸入。 提交表單后，我想在新頁面上的單獨卡片中呈現輸入。

我需要在代碼中添加/更改什么才能讓用戶輸入顯示在卡片或任何 html 元素中而不是呈現到控制台？

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>
      )
    }
  }

Answer 1

您可以使用集中式單一狀態來管理您的問題，如果您想將值傳遞給子組件太深（如果您有太多嵌套組件），您可以考慮使用上下文，如果您想將值傳遞給直接子組件只是，那么你就不必使用上下文或任何狀態管理庫，平面反應就足以管理情況，

例如：

[Parent Component that keeps all values]
   - Child 1 - Form Page - get all values and save it in the parent component
   - Child 2 - Display Page - get values from the parent and display it here

如果您認為需要可以使用的上下文，請參考React 上下文。