將數據傳遞給其他組件

Question

Form.js

import React from 'react'

export default class Form extends React.Component{

    handlePatientDisease(e){
        this.setState({
            patientdisease: e.target.value
        })
    }
        handlePatientPresentIllness(e){
        this.setState({
            patientpresentillness: e.target.value
        })
    }
    handlePatientName(e){
    let patientName = e.target.value
    this.setState({ patientName })
    this.props.onPatientNameChange.value
}

handleSubmit(e){
    e.preventDefault();
    console.log("Patient name changed to:", patientName.value)
    }

render () {
    return (
    <form onSubmit={this.handleSubmit}> 
        <ul>
            <li>
                <label> Nome do Paciente </label>
                <input type="text" name="patientName" id="patientName" placeholder="nome do paciente"  onChange={this.handlePatientName.bind(this)} />

            </li>
            <li>
                <label> Doença 
                <input type="text" name="patientdisease" placeholder="disease"/>
                </label>
            </li>
            <li>
                <label> Histórico 
                <input type="text" name="patientpresentillness" placeholder="historia do paciente"/>
                </label>
            </li>


            <li>
                <button type="submit"> Submit </button>
            </li>
        </ul>

</form>
        );
}


}

所以，現在我已經可以獲得以該形式提交的數據並在控制台上顯示它。 我現在如何在另一個組件中顯示？ 我想將該數據作為下面該組件中的列表項：

Sidebar.js

import React from 'react'
import patientName from './Form'

export default class Sidebar extends React.Component{
    handlePatientNameChange(patientName){
        console.log("Patient name changed to:", patientName)
    }

render () {
    return(
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
              <ul class="nav nav-sidebar">

                <li><a href="#">Alexandre Miranda</a></li>
                <li><a href="#">Felipe Neves</a></li>
                <li><a href="#">Andressa Lyra</a></li>
                <li><a href="#">Artur Lyra</a></li>
                <li><a href="#">Antonio Lyra</a></li>
                <li><a href="#">Ricardo Lyra</a></li>
                // When I submit, I want to show the patientName here as a list item....            



              </ul>

            </div>
           </div>
          </div>

        );
}

}

Answer 1

您的示例未顯示補充工具欄和表單組件之間的連接。 它們是否在同一個父組件中呈現？

一般來說，您需要將Sidebar組件的回調添加到Form組件中。 使用新值將在提交時調用回調。 然后，補充工具欄組件將更新其狀態並重新渲染。

Answer 2

您需要某種可由組件，表單和側邊欄訪問的公共數據存儲。

天真的方法是創建一個包含患者列表的全局數組。 這可以從應用程序的任何位置訪問，也可以從表單中編寫，也可以從側邊欄中讀取。 然而，有很多討論為什么全局變量可能是一個壞主意，所以這個解決方案很可能不是首選的解決方案。

---

更好的選擇是將列表保持在表單和側欄的共同祖先組件的state 。 比如說，如果您的應用程序結構如下：

<App>
    <Form />
    <Sidebar />
</App>

，而不是將其保持在Form的狀態，將其轉移到App ，將其存儲在其狀態，並通過其道具將其傳遞給Sidebar 。

---

一旦您的應用程序變得更加復雜，您應該考慮將應用程序的數據存儲在React組件之外的中心位置的更通用的方法 。 雖然有許多有效的方法可以解決這個問題，但您可以將Flux或Redux作為起點。