在阻止点击事件

时间:2016-10-27 10:53:03

标签: javascript reactjs onclick react-router-redux

我有一个容器是一组按钮,但让我们只将组件视为一个组件。该组件有一个onBlockClick,可以获取id的位置。

我想将id转换为registrationSomeContainer

我的问题是,如何处理onBlockClick的其他容器?

let registrationContainer = ({
    i18n,
    id,
    name,
    representative,
    onBlockClick,
    dispatch
}) => {

    return (
        <div>
            <div
                className="app_wrapper"
            >
                <Block
                    leftIcon="close"
                    lines={[
                        "Some",
                        representative
                    ]}
                    onBlockClick(id)
                />
            </div>
        </div>
    )

}

1 个答案:

答案 0 :(得分:1)

效率较低的方式

 Intent sendIntent = new Intent("android.intent.action.MAIN");
 sendIntent.setComponent(new  ComponentName("com.whatsapp","com.whatsapp.Conversation"));
 sendIntent.putExtra("jid", PhoneNumberUtils.stripSeparators("YOUR_PHONE_NUMBER")+"@s.whatsapp.net");//phone number without "+" prefix

 startActivity(sendIntent);

更优化的代码可以是

const registrationContainer = ({
    i18n,
    id,
    name,
    representative,
    onBlockClick,
    dispatch
}) => {
    return (
        <div className="app_wrapper">
            <Block
                leftIcon="close"
                lines={[
                    "Some",
                    representative
                ]}
                onBlockClick={onBlockClick.bind(null, id)}
            />
        </div>
    );
}

为什么绑定坏方法

绑定const registrationContainer = ({ i18n, id, name, representative, onBlockClick, dispatch }) => { return ( <div className="app_wrapper"> <Block id={id} // Look: passing id leftIcon="close" lines={[ "Some", representative ]} onBlockClick={onBlockClick} // Look: not binding /> </div> ); } class Block extends Component { handleClick = (e) => { this.props.onBlockClick(this.props.id); }; render() { <div onClick={this.handleClick}> </div> } } 使onBlockClick={onBlockClick.bind(null, id)}每次都获得新的引用,因此导致子组件重新呈现。从这里阅读更多内容https://daveceddia.com/avoid-bind-when-passing-props/