为什么我无法让我的 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没有设置事件绑定。

确保所有道具都传递给

最里面的孩子的一种简单方法是使用传播运算符将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')
);