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作为起点。

将数据传递给其他组件

2 个答案: