带有 onChange 处理程序的无状态 React 组件：合成事件警告答案

【问题标题】：Stateless React component with onChange handler: Synthetic event warning带有 onChange 处理程序的无状态 React 组件：合成事件警告
【发布时间】：2017-04-21 03:10:12
【问题描述】：

我正在尝试对状态由无状态子级管理的有状态组件进行简单实现。目前处理程序只触发一个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> )
}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你有一个错字。

this.setInterest = this.setState.bind( this ) 必须是

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

【讨论】：

我想笑。我想哭。谢谢。