私はonChange/onBlurハンドラをカスタムコンポーネント（reactjs）で動作させることができません

Question

なぜ私のonChangeハンドラを子カスタムコンポーネントで動作させることができませんか？私は何か見落としてますか。あなたが解決策を教えてくれますか？これを行うのがベストプラクティスであれば教えてください。ありがとう。

サンプルコード：

var TextBox = React.createClass ({ 
getDefaultProps: function() { 
    return { 
     className: 'input-box' 
    }; 
}, 

render() { 
    return (
     <input type="text" /> 
    ); 
} 
}); 

var Dashboard = React.createClass({ 
handleChange() { 
    alert('test'); 
} 

render() { 

    return (
     <div> 
      <h1>Components</h1> 
      <label>Input Box</label><br/> 
      <TextBox onBlur={this.handleChange} type="text" placeholder="hints (optional)"/> 
     </div> 
    ) 
} 
}); 
//ReactDOM.render goes here... 

Answer 1

を試してみてください入力コンポーネントに至るまでの小道具として。そのままですが、inputにはイベントバインディング設定がありません。

あなたの小道具が一番内側の子供に渡されるようにする簡単な方法は、the spread operatorを使用して、TextBoxコンポーネント内のすべての小道具を子供に渡すことです。

だから、あなたのTextBoxコンポーネントは、関数は次のようになりレンダリング：

render() { 
    return (
    <input { ...this.props } type="text" /> 
    ); 
} 

そして、それはそれです！ <TextBox />に渡す小道具はすべて<input>

Answer 2

あなたは親コンポーネント

の変化を取得するためにコールバックを使用する必要がありますが、イベントハンドラに沿って渡す必要があり、以下のように

class TextBox extends React.Component { 
    render() { 
    return (
     <input onBlur={this.props.callBack} type="text" /> 
    ); 
    } 
} 
class Dashboard extends React.Component { 
    render() { 
    const handleChange =() => { 
     console.log('---'); 
    } 
    return (
     <div> 
     <h1>Components</h1> 
     <label>Input Box</label><br/> 
     <TextBox callBack={handleChange} type="text" placeholder="hints (optional)"/> 
     </div> 
    ); 
    } 
} 

React.render(
    <Dashboard />, 
    document.getElementById('react_example') 
);