React JS中如何创建带可选handleOnBlur属性的可复用组件

我有一个自定义的TextField组件，代码如下：

return (
    <TextField 
        label={props.label} 
        name={props.name}
        placeholder={props.placeholder} 
        type={textFieldType === 'password' ? props.type : textFieldType}
                
        onBlur={(event) => props.handleOnBlur(event)} //失去焦点后触发
        onChange={(event) => props.handleOnChange(event)}   //值改变时触发
        
        value={props.value}
    ></TextField>
)

使用该组件的示例：

//姓名输入框
<MyTextField
    type={inpValues.firstName.type}
    label={inpValues.firstName.label}
    name={inpValues.firstName.name}
    placeholder={inpValues.firstName.placeHolder}

    handleOnChange={
        (event) => {console.log('onChange called =' + event.target.value)}
    }

    value={inpValues.firstName.value}
    >
</MyTextField>

//邮箱地址输入框
<MyTextField
    type={inpValues.email.type}
    label={inpValues.email.label}
    name={inpValues.email.name}
    placeholder={inpValues.email.placeHolder}

    handleOnBlur={
        (event) => {console.log('onBlur called =' + event.target.value)}
    }
    handleOnChange={
        (event) => {console.log('onChange called =' + event.target.value)}
    }

    value={inpValues.email.value}
    >
</MyTextField>

我希望仅在特定的TextField（如邮箱输入框）中调用handleOnBlur方法，而非所有TextField都触发该方法，请问该如何实现？

修改自定义的TextField组件，判断props中是否传入了handleOnBlur，仅当该属性存在时，才为底层TextField绑定onBlur事件即可。

写法一：对象扩展语法 #

return (
    <TextField 
        label={props.label} 
        name={props.name}
        placeholder={props.placeholder} 
        type={textFieldType === 'password' ? props.type : textFieldType}
                
        {/* 仅当handleOnBlur存在时才绑定事件 */}
        {...(props.handleOnBlur && { onBlur: (event) => props.handleOnBlur(event) })}
        onChange={(event) => props.handleOnChange(event)}
        
        value={props.value}
    ></TextField>
)

写法二：三元表达式判断 #

return (
    <TextField 
        label={props.label} 
        name={props.name}
        placeholder={props.placeholder} 
        type={textFieldType === 'password' ? props.type : textFieldType}
                
        onBlur={props.handleOnBlur ? (event) => props.handleOnBlur(event) : undefined}
        onChange={(event) => props.handleOnChange(event)}
        
        value={props.value}
    ></TextField>
)

使用说明 #

• 当你使用MyTextField时，只有传入handleOnBlur属性的组件（比如邮箱输入框），才会触发失去焦点的回调；
• 像姓名输入框这种未传入handleOnBlur的组件，底层TextField的onBlur会是undefined，不会触发任何操作，完全符合需求。

内容的提问来源于stack exchange，提问作者Liam neesan