Javascript 如何在React中触发onBlur事件?
我有一个输入字段值,我想将其格式化为onBlur,下面是我的代码: 组件:Javascript 如何在React中触发onBlur事件?,javascript,function,reactjs,onblur,Javascript,Function,Reactjs,Onblur,我有一个输入字段值,我想将其格式化为onBlur,下面是我的代码: 组件: <Input onBlur={this.formatEndpoint} /> formatEndpoint() { let endpoint = this.state.inputEndpoint; endpoint = endpoint.replace(/\s/g, '').replace(/\/+$/, ''); if (endpoint.slice(-1)
<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()
onBlur都不能工作?谢谢。多亏了这些评论,我才弄明白。我不得不在Input
中添加一个onBlur
道具,如下所示:
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: () => {},
};
导出默认类输入扩展React.Component{
构造函数(){
超级();
this.handleBlur=this.handleBlur.bind(this);
}
车把{
const{onBlur}=this.props;
onBlur();
}
render(){
返回
}
}
Input.propTypes={
onBlur:PropTypes.func,
};
Input.defaultProps={
onBlur:()=>{},
};
经过大量的搜索,我用下面的代码做到了这一点,
在我的例子中,我使用的是React CS6
class test extends React.Component {
onBlur() {
console.log('anything');
}
render () {
let { onBlur, onChange, value, ...props } = this.props;
return (
<input onBlur={ this.onBlur } />
);
}
}
类测试扩展了React.Component{
onBlur(){
console.log(“任何东西”);
}
渲染(){
让{onBlur,onChange,value,…props}=this.props;
返回(
);
}
}
看起来像是自定义的输入。您应该检查组件是否支持onBlur
。是的,Input
的定义是什么样的?是你写的吗?这些评论很有帮助,我只需要在输入中添加一个onBlur道具。