Почему я не могу заставить обработчик 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') 
);