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

您需要将事件处理程序作为props一直传递到输入组件。实际上，您的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')
);

为什么我不能让我的onChange / onBlur处理程序在自定义组件上工作（reactjs）

2 个答案: