2016-04-04 13 views
0

Reactjsを開始したばかりですが、このdivの表示/非表示のコンポーネントを親divでクリックすると子(テキストボックス)が表示されますが、問題はありません子div(テキストボックス)にタイプするときに親divが変更されます。 。 。手伝って頂けますか?ReactjsコンポーネントonClickと同時に更新する

"use strict"; 

var Child = React.createClass({ 
displayName: "Child", 

getInitialState: function getInitialState() { 
return { txt: "" }; 
}, 

updateTxt: function updateTxt(e) { 
    this.setState({ txt: e.this.target }); 
}, 

render: function render() { 
    return React.createElement(
     "div", 
     null, 
     React.createElement("input", { type: "text", onChange: this.updateTxt }) 
); 
} 
}); 

var ShowHide = React.createClass({ 
    displayName: "ShowHide", 

getInitialState: function getInitialState() { 
    return { txt: "Wilbert", childVisible: false }; 
}, 

render: function render() { 
    return React.createElement(
    "div", 
    null, 
    React.createElement(
    "div", 
    {onClick: this.onClick, update:this.updateTxt}, 
    this.state.txt 
), 
    this.state.childVisible ? React.createElement(Child, null) : null 
); 
}, 

onClick: function onClick() { 
    this.setState({ childVisible: !this.state.childVisible }); 
    } 
}); 

ReactDOM.render(React.createElement(
    "div", 
    { "className": null, id: null }, 
    React.createElement(ShowHide, null)), 
    document.getElementById('content') 
)); 
+0

あなたは 'updateTxt'機能のご入力の[値]を取得する必要があります:' this.setState({TXT:e.target.value}); ' – pawel

+0

私はその関数の先生に何を変更する必要があります? – treb

答えて

0

値属性がありません。

render: function render() { 
    return React.createElement(
     "div", 
     null, 
     React.createElement("input", { type: "text",value={this.state.txt} onChange: this.updateTxt }) 
); 
} 
}) 
関連する問題