具有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 )