[英]Stateless React component with onChange handler: Synthetic event warning
I am trying do do a simple implementation on a stateful component who's state is managed by a stateless Child. 我正在尝试对状态由无状态的Child管理的有状态组件执行简单的实现。 Currently the handler only triggers a console.log. 当前,处理程序仅触发console.log。
Expected behavior: When an field is updated the parent component should trigger a console.log. 预期行为:更新字段时,父组件应触发console.log。
Actual behavior The setInterest is never triggered and instead I'm getting an error about synthetic events: 实际行为 setInterest从未触发,相反,我收到有关合成事件的错误:
This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `nativeEvent` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().
The components render visually as expected, and I get no other errors either in the browser of Webpack. 这些组件以预期的方式呈现视觉效果,而且Webpack的浏览器中也没有出现其他错误。
Any help would be greatly appreciated. 任何帮助将不胜感激。
Stateful component: 有状态组件:
// Setting the parameters of the market
export class Parameters extends React.Component {
// Constructor setting default state
constructor ( props ) {
super ( props )
// Set the state objects
this.state = {
interest: {
pessimistic: this.props.pessimistic || 1,
historical: this.props.historical || 4,
optimistic: this.props.optimistic || 7
}
}
// Bind the functions for use in the render
this.setInterest = this.setState.bind( this )
}
// Set the parameters
setInterest( e ) {
console.log('I AM NEVER TRIGGERED')
}
// Rendering of message
render( ) {
return(
<div>
<ParametersView
handleChange={ this.setInterest }
interest={ this.state.interest } />
<DesiresView />
</div>
)
}
}
Stateless component 无状态组件
// Import react
import React from 'react'
export const ParametersView = ( { handleChange, interest } ) => {
return (
<div>
<span id="assumptions">
<input
onChange={ handleChange }
value={interest.pessimistic}
id="pessimistic" type="number" name="pessimistic" />
<input
onChange={ handleChange }
value={interest.historical}
id="historical" type="number" name="historical" />
<input
onChange={ handleChange }
value={interest.optimistic}
id="optimistic" type="number" name="optimistic" />
</span>
</div>
)
}
export const DesiresView = ( ) => {
return ( <p>No desire view yet</p> )
}
You have a typo. 你有错字
this.setInterest = this.setState.bind( this )
needs to be this.setInterest = this.setState.bind( this )
需要是
this.setInterest = this.setInterest.bind( this )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.