反応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

子コンポーネントは、「ダム」であるべきであり、コンポーネントの状態を変更するべきではありません。状態を変更する必要がある場合は、単純に小道具を渡してデータを親に戻す必要があります。

hello関数を適切な小道具myFuncとして渡しています。ドロップダウンアイテムは、その関数を呼び出して、親が選択したアイテムの状態を設定できるように、必要なデータを渡す必要があります。

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

これは、親コンポーネントでhello関数を呼び出しますし、その後、あなたはそこから状態を設定することができます。