据我了解,onFocus
单击输入框时应调用,并且onBlur
当其他事情成为焦点时应该调用。
我的意图:我想调用一个函数,当通过单击激活时,它将.concat
焦点输入框的消息字符串,但我无法获取onFocus
or onBlur
上班。
从我周围搜索的结果来看,这应该可以解决问题,但没有。
import React, { Component } from 'react'
class SocialPost extends Component {
state = {
message: this.props.socialPost.message,
focus: false
}
_onBlur() {
setTimeout(() => {
if (this.state.focus) {
this.setState({
focus: false,
});
}
}, 0);
}
_onFocus() {
if (!this.state.focus) {
this.setState({
focus: true,
});
}
}
render() {
return (
<div className='...'>
<div className='...'>
...
<input
onFocus={this._onFocus()}
onBlur={this._onBlur()}
type='text'
value={this.state.message}
onChange={...}/>
...
</div>
</div>
)
}
}
export default SocialPost
- Why is
onFocus
and onBlur
在我单击/取消单击组件之前渲染组件时调用?
- 我如何得到这个
onFocus
and onBlur
工作时,是否有另一种方法可以专注于激活的输入框?
- 它被调用是因为您在渲染方法中运行该函数,您应该传递函数,而不是它们返回的内容。
改变这个:
onFocus={this._onFocus()}
onBlur={this._onBlur()}
to this:
onFocus={this._onFocus}
onBlur={this._onBlur}
2.你不能这样声明组件的状态。它必须在构造函数中完成。另外,如果您想参考 SocialPost 的this
你必须绑定它。我认为最好的地方是在构造函数中。
整个代码应该如下所示:
import React, { Component } from 'react'
class SocialPost extends Component {
constructor (props) {
super(props)
this.state = {
message: props.socialPost.message,
focus: false
}
this._onBlur = this._onBlur.bind(this)
this._onFocus = this._onFocus.bind(this)
}
_onBlur() {
setTimeout(() => {
if (this.state.focus) {
this.setState({
focus: false,
});
}
}, 0);
}
_onFocus() {
if (!this.state.focus) {
this.setState({
focus: true,
});
}
}
render() {
return (
<div className='...'>
<div className='...'>
...
<input
onFocus={this._onFocus}
onBlur={this._onBlur}
type='text'
value={this.state.message}
onChange={...}/>
...
</div>
</div>
)
}
}
export default SocialPost
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)