想象下面某个组件的功能:
handleInputChange(e) {
// let val = e.target.value; - if I uncomment this, it works.
// Update text box value
this.setState(function (prevState, props) {
return {
searchValue: e.target.value,
}
})
}
和文本框,由上述组件的子组件呈现,并接收handleInputChange
为props
:
<input type="text" onChange={that.props.handleInputChange} value={that.props.searchValue} />
当我在文本字段中输入内容时,出现错误消息Cannot read property 'value' of null
。
如果我取消注释handleInputChange
函数中的第一行(将文本框值存储在val
变量中),那么它将很好地工作。想法为什么?
这是因为React进行了事件池 -回调完成后,所有事件的字段都为空,因此您在异步setState
回调中将它们视为null 。
请将事件数据复制到变量或调用event.persist()
以禁用此行为。
handleInputChange(e) {
e.persist();
this.setState(function (prevState, props) {
return {
searchValue: e.target.value,
}
})
}
要么:
handleInputChange(e) {
const val = e.target.value;
this.setState(function (prevState, props) {
return {
searchValue: val
}
})
}
请参见以下示例:
class Example extends React.Component {
constructor() {
super()
this.state = { }
}
handleInputChangeCopy = (e) => {
const val = e.target.value;
console.log('in callback');
console.log(e.target.value);
this.setState(function (prevState, props) {
console.log('in async callback');
console.log(val);
return {
searchValue: val
}
})
}
handleInputChangePersist = (e) => {
e.persist();
console.log('in callback');
console.log(e.target.value);
this.setState(function (prevState, props) {
console.log('in async callback');
console.log({ isNull: e.target === null })
console.log(e.target.value);
return {
searchValue: e.target.value
}
})
}
handleInputChange = (e) => {
console.log('in callback');
console.log(e.target.value);
this.setState(function (prevState, props) {
console.log('in async callback');
console.log({ isNull: e.target === null })
console.log({ event: e });
console.log(e.target.value);
return {
searchValue: e.target.value
}
})
}
render() {
return (
<div>
<div>Copy example</div>
<input
type="text"
onChange={this.handleInputChangeCopy}
/>
<p>Persist example</p>
<input
type="text"
onChange={this.handleInputChangePersist}
/>
<p>Original example - please note nullified fields of the event in the async callback. <small>Breaks the example, please re-run after a Script error</small></p>
<input
type="text"
onChange={this.handleInputChange}
/>
<div style={{height: 300}} />
</div>
)
}
}
ReactDOM.render(
<Example searchValue={"test"} />,
document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
如何在JavaFX中为快捷键添加功能键(即F1到F12键)?我用保存按钮。我不需要点击保存按钮,它使系统变得容易
问题内容: 在过去的几天里,我一直在学习React,研究一些有关编写不同元素的不同方式的教程和说明。但是,我最想知道的是- 更新/覆盖组件属性的功能。 例如,假设我有一个包含以下内容的类: 这个例子让我从API获取图像。 鉴于我已经执行了此函数的获取,映射和返回操作-然后,我将使用在API调用中获得的结果来更新状态数组。 我的问题源于我所见过的关于如何更新/覆盖图片状态属性的不同方法。 我看到它以
我在学反应。我读过一篇文章,建议我们使用函数组件,而不是扩展react.component的类,所以我跟着做了。我也使用箭头函数而不是函数关键字。即: 有没有一种方法可以使用setState()来代替setName()、setId()、…等?或者任何建议? 非常感谢!
我正在制作一个CloudFormation模板,以捕获将CloudWatch事件发送到Kinesis Firehose交付流的流程的组件。(它在AWS中工作,通过控制台手动配置。) 当我定义AWS::E通风口::规则时,有一个目标属性需要有效目标的ARN。问题是资源不支持检索其ARN,只返回其逻辑ID。(Fn::GetAtt可用于获取的ARN,但没有。) 我是不是走错了路,或者这只是云阵还不支持的
问题内容: 我目前正在使用freesolo自动完成功能,并且我的特定用例要求在逗号或空格跟随输入文本时创建标记。当前,自动完成功能会在Enter事件上创建标签,但我认为自动完成功能中没有内置任何功能,但支持任何其他事件的标签创建。我想知道我是否缺少任何东西,或者如果我没有,我该如何解决这个问题? 当前,我正在尝试使用Autocomplete中的onInputChange属性来捕获传入的字符串。我检
当我使用Google Tag Manager跟踪链接点击时,它会显示为Google Analytics(分析)中的事件。到目前为止还不错。让我们在GTM中说:类别是{{事件}}/操作是{{单击事件}},标签是{{页面路径}} 现在我将此事件作为分析目标(转换)-而不是AdWords。那么我是对的,我必须再次设定目标,但我们不能从GTM中获得变量吗?所以分类必须像“测试”动作“点击”标签“链接点击”