無狀態的反應組件與onChange處理程序：合成事件警告

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)