如何在React中觸發Blur事件？

我有，我想格式化的onblur輸入字段值，這裏是我的代碼如下所示：如何在React中觸發Blur事件？

組件：

<Input 
    onBlur={this.formatEndpoint} 
    />

功能：

formatEndpoint() { 
    let endpoint = this.state.inputEndpoint; 

    endpoint = endpoint.replace(/\s/g, '').replace(/\/+$/, ''); 

    if (endpoint.slice(-1) === '/') { 
     endpoint = endpoint.substring(0, endpoint.length - 1); 
    } 

    console.log('anything'); 
    }

爲什麼甚至沒有console.log()工作在Blur上？謝謝。

來源

2017-10-04 Ralph David Abernathy

看起來像一個自定義的'輸入'。你應該檢查組件是否支持'onBlur'。 – Panther

是的，Input的定義是什麼樣的？你寫了嗎？ – mikkelrd

這些評論有幫助，我只需要添加一個onBlur道具到'Input'。 –

感謝評論，我能夠弄明白。我有一個onBlur道具添加到Input像這樣：很多搜索後

export default class Input extends React.Component { 
    constructor() { 
    super(); 
    this.handleBlur = this.handleBlur.bind(this); 
    } 

    handleBlur() { 
    const { onBlur } = this.props; 
    onBlur(); 
    } 

    render() { 
    return <input onBlur={this.handleBlur} /> 
    } 
} 

Input.propTypes = { 
    onBlur: PropTypes.func, 
}; 

Input.defaultProps = { 
    onBlur:() => {}, 
};

來源

2017-10-04 16:50:22

，我這樣做，與後續的代碼，在我的情況，我使用作出反應CS6。

class test extends React.Component { 
    onBlur() { 
    console.log('anything'); 
    } 


    render() { 
     let { onBlur, onChange, value, ...props } = this.props; 

     return (
     <input onBlur={ this.onBlur } /> 
    ); 
    } 

}

來源

2018-01-08 22:21:27

如何在React中觸發Blur事件？

回答

相關問題