Question

我使用Semantic-UI CSS Framework有一个下拉菜单。我想在drowdown菜单上选择一个项目，并知道选择了哪个项目。我可以知道哪个被选中并在子组件中设置状态但是我不能发送父组件。实际上我是通过使用回调函数发送的，但它在设置父状态时发生循环并超出内存。我跟着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

儿童成分应该是“愚蠢的”＃34;并且不应该改变组件的状态。如果状态需要更改，它们应该简单地传递道具并将数据传递回父级。

您正在将hello函数作为prop myFunc传递，这是正确的。然后，下拉项应调用该函数并将其传递给必要的数据，以便父项可以设置所选项的状态。

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

这将调用父组件中的hello函数，然后您可以从那里设置状态。

在js

1 个答案: