반응 js에서 자식 구성 요소에서 부모 구성 요소로 데이터 보내기

Question

Semantic-UI CSS Framework을 사용하여 드롭 다운 메뉴가 있습니다. 드롭 다운 메뉴에서 항목을 선택하고 선택한 항목을 알고 싶습니다. 하위 구성 요소에서 어떤 항목이 선택되고 상태가 설정되었는지는 알 수 있지만 상위 구성 요소는 보낼 수 없습니다. 사실 콜백 함수를 사용하여 보냈지 만 부모 상태를 설정하는 동안 루프가 발생하고 메모리를 초과합니다. 나는 그것에 대해 this way를 쫓아 갔다.

내 부모 구성 요소는 "SorguView"또한 하위 구성 요소는 "DropDownItem"입니다 위해 도움이

감사합니다.

Sorgu 등급 :

export class Sorgu { 
    _id:string; 
    userName:string; 
    anaSorgu:string; 
    aciklama:string; 
    sName:string; 

    constructor(id:string, username:string, anaSorgu:string, aciklama:string, sName:string) { 
     this._id = id; 
     this.userName = username; 
     this.anaSorgu = anaSorgu; 
     this.aciklama = aciklama; 
     this.sName=sName; 
    } 
} 

인터페이스 SorguProps :

export interface SorguProps { 
    sorgu:Sorgu; 
} 

인터페이스 SorguProps :

export interface SorguStates { 
    sorguList:Array<Sorgu>; 
    selectedName:string; 
} 

DropDownItem 구성 요소 (자식) :

class DropdownItem extends React.Component<SorguProps,SorguStates> { 


    constructor(props: SorguProps, context: any) { 
     super(props, context); 
     this.state = { 
      selectedName: 'no-data' 
     } as SorguStates; 

     this.calis = this.calis.bind(this); 
    } 

    calis =() => { 
     this.setState({selectedName: $('.item.active.selected').text()},() => console.log("")); 

    } 


    render() { 
     console.log("states",this.state); 
     console.log("props",this.props); 
     this.props.myFunc(this.state.selectedName); 
     return (

      <div className="item" data-value={this.props.id} onClick={this.calis}> 

       {this.props.name} 

      </div> 

     ); 
    } 

} 

SorguView (부모) :

export class SorguView extends React.Component<SorguProps,SorguStates> { 


    constructor(props: SorguProps, context: any) { 
     super(props, context); 
     this.state = { 
      sorguList: [], 
      selectedName:'' 
     } as SorguStates; 


     this.hello=this.hello.bind(this); 



    } 



    hello(data){ 

     console.log("data=>"+data); 
     //this.setState({selectedName: data} as SorguStates); //Exceed memory 
     console.log("=>>>>"+ this.state.selectedName); 

    } 

    render(){ 

     return (
      <div className="ui selection dropdown" ref="dropSorgu"> 
       <input type="hidden" name="selSorgu"/> 
       <div className="default text">Seçiniz</div> 
       <i className="dropdown icon"></i> 
       <div className="menu"> 

        <DropdownItem name={this.state.sorguList[0].sName} id={this.state.sorguList[0].sName} myFunc={this.hello} /> 

       </div> 
      </div> 
     ); 
    } 
} 

Answer 1

아이들 구성 요소가 "바보"해야하며, 구성 요소의 상태를 변경해서는 안된다. 상태를 변경해야 할 경우 소품을 전달하고 부모에게 데이터를 다시 전달해야합니다.

안녕 기능을 올바른 myFunc 소품으로 전달 중입니다. 드롭 다운 항목은 그 함수를 호출하여 부모가 선택한 항목의 상태를 설정할 수 있도록 필요한 데이터를 전달해야합니다.

calis =() => { 
    this.props.myFunc($('.item.active.selected').text()); 
} 

이 상위 구성 요소의 hello 함수를 호출 한 다음 거기에서 상태를 설정할 수 있습니다.