javascript - 将数据传递给其他组件

Question

表单.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>
        );
}


}

所以，现在我已经可以获取以该表单提交的数据并将其显示在控制台上。现在如何在另一个组件中显示？我希望将该数据作为下面该组件中的列表项:

侧边栏.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

您需要某种可由两个组件(表单和侧边栏)访问的通用数据存储。

最简单的方法是创建一个包含患者列表的全局数组。您可以从应用程序中的任何位置访问该信息，并且可以从表单写入，也可以从侧边栏读取。然而，有很多讨论为什么全局变量可能是一个坏主意，所以这个解决方案很可能不是首选方案。

<小时/>

更好的选择是将列表保留在表单和侧边栏的共同祖先组件的状态中。假设您的应用程序的结构如下:

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

，不要将其保持在Form的状态，而是将其传输到App，将其存储在其状态中并将其向下传递到Sidebar > 通过它的 props。

<小时/>

一旦您的应用程序变得更加复杂，您应该考虑一种更通用的方法来将应用程序的数据存储在 React 组件之外的中心位置。虽然有许多有效的方法可以解决这个问题，但您可以查看 Flux或Redux作为起点。