具有onChange处理程序的无状态React组件：综合事件警告

Question

我正在尝试对状态由无状态的Child管理的有状态组件执行简单的实现。 当前，处理程序仅触发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 )