javascript - 带有 onChange 处理程序的无状态 React 组件 : Synthetic event warning

Question

我正在尝试在状态由无状态子组件管理的有状态组件上做一个简单的实现。目前处理程序仅触发 console.log。

预期行为:更新字段时，父组件应触发 console.log。

实际行为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().

组件按预期呈现在视觉上，我在 Webpack 的浏览器中也没有收到其他错误。

如有任何帮助，我们将不胜感激。

有状态组件:

// 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>
        )

    }
}

无状态组件

// 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> )
}

Answer 1

你打错了。

this.setInterest = this.setState.bind( this ) 需要

this.setInterest = this.setInterest.bind( this )