2016-08-25 2 views
1

Я пытаюсь отобразить простое поле ввода, в котором при изменении значения будет вызываться обратный вызов от родительского компонента. Мой код приведен ниже:onChange событие не стреляет для поля ввода с React

class Parent extends React.Component { 
    myMethod() { 
     alert("Test"); 
    } 
    render() { 
     return (
      <Child cb={this.myMethod} /> 
     ); 
    } 
} 

class Child extends React.Component { 
    render() { 
     return (
      <input type="text" placeholder="enter text" onChange="{this.props.cb}" /> 
     ); 
    } 
} 

Child.propTypes = { 
    cb: React.PropTypes.func 
} 

ReactDOM.render(
    <Parent />, 
    document.getElementById("container") 
); 

Мой HTML код:

<div id="container"> 

</div> 

Ошибка я получаю:

Warning: Failed prop type: Child: prop type `cb` is invalid; it must be a function, usually from React.PropTypes. 
    in Child (created by Parent) 
    in Parent 

Warning: Failed form propType: Invalid prop `onChange` of type `string` supplied to `input`, expected `function`. Check the render method of `Child`. 

Я новичок в React, и не могу понять, как иначе я должен передать обратный вызов дочернему компоненту. Может кто-нибудь помочь, пожалуйста?

ответ

1

Ваш OnChange проп не должна быть строка:

class Child extends React.Component { 
    render() { 
     return (
      <input type="text" placeholder="enter text" onChange={this.props.cb} /> 
     ); 
    } 
} 
+0

Спасибо большое! Глупо от меня ... – user3033194

1

Удалить кавычки вокруг стоимости onChange:

<input type="text" placeholder="enter text" onChange={this.props.cb} /> 
+0

Большое спасибо за ответ! – user3033194

Смежные вопросы