데이터 전달

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

두 가지 구성 요소, 양식 및 사이드 바에서 액세스 할 수있는 일종의 일반적인 데이터 저장소가 필요합니다.

순진한 접근 방식은 환자 목록을 포함하는 전역 배열을 만드는 것입니다. 응용 프로그램의 어느 곳에서나 액세스 할 수 있으며 양식에서 작성하고 사이드 바에서 읽을 수도 있습니다. 그러나 글로벌 변수가 나쁜 아이디어 일 수있는 이유에 대해 많은 논의가 있기 때문에이 솔루션이 선호되지는 않습니다. 더 나은 옵션이 하는 것

---

양식 및 사이드 바의 공통 조상 구성 요소의 state의 목록을 유지한다. 앱이 다음과 같이 구성되어있는 경우, 말 :

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

가 대신 Form의 상태로 유지의, App로 전송 저장 위치를 ​​상태에와 소품을 통해 Sidebar에 그것을 아래로 전달합니다.

---

응용 프로그램이 더 복잡하게되면, 당신은 당신의 반작용 구성 요소의 외부 중앙 위치에서 응용 프로그램의 데이터를 저장하는 더 일반적인 접근 방식에 대해 생각해야한다. 이 문제에 대한 수십 가지 유효한 접근 방법이 있지만 Flux 또는 Redux을 시작점으로들 수 있습니다.

Answer 2

사이드 바 및 양식 구성 요소 사이의 연결은 무엇 표시되지 않습니다 예. 동일한 상위 구성 요소 내에서 렌더링됩니까?

일반적으로 Sidebar 구성 요소의 콜백을 Form 구성 요소에 추가해야합니다. 새 값으로 제출시 콜백이 호출됩니다. 사이드 바 구성 요소는 상태를 업데이트하고 다시 렌더링합니다.