2017-02-25 6 views
0

output look like thisテキストボタンをクリックすると、テキスト(TodoApplication)がその値で置き換えられるはずです(空白の見出しを置き換える必要があります)。誰でもコードを編集して解決策を得ることができます!react-jsのonclickの値を変更する

var TodoApp = React.createClass({ 
 
    getInitialState: function() { 
 
return {items: []}; 
 
    }, 
 
    updateItems: function(newItem) { 
 
var allItems = this.state.items.concat([newItem]); 
 
this.setState({items: allItems}); 
 
    }, 
 
    render: function() { 
 
return (
 
    <div> 
 
    <TodoBanner/> 
 
    <TodoList items={this.state.items}/> 
 

 
    <TodoForm onFormSubmit={this.updateItems}/> 
 
    </div> 
 
); 
 
    } 
 
}); 
 

 
var TodoBanner = React.createClass({ 
 
    render: function() { 
 
return (
 
    <div className="container"> 
 
    <h3>TODO Application</h3> 
 
    </div> 
 
); 
 
    } 
 
}); 
 

 
var TodoList = React.createClass({ 
 
    render: function() { 
 
var createItem = function(itemText) { 
 
    return (
 
    <TodoListItem>{itemText} 
 
    </TodoListItem> 
 
); 
 
}; 
 
return <ul>{this.props.items.map(createItem)}</ul>; 
 
    } 
 
}); 
 

 
var TodoListItem = React.createClass({ 
 
    render: function() { 
 
return (
 
    <li>{this.props.children}</li> 
 
); 
 
    } 
 
}); 
 

 
var TodoForm = React.createClass({ 
 
    getInitialState: function() { 
 
return {item: ''}; 
 
    }, 
 
    handleSubmit: function(e) { 
 
e.preventDefault(); 
 
this.props.onFormSubmit(this.state.item); 
 
this.setState({item: ''}); 
 
React.findDOMNode(this.refs.item).focus(); 
 
return; 
 
    }, 
 
    onChange: function(e) { 
 
this.setState({item: e.target.value}); 
 
    }, 
 
    render: function() { 
 
return (
 
    <div className="container"> 
 
    <form onSubmit={this.handleSubmit}> 
 
     <input type='text' ref='item' onChange={this.onChange} value={this.state.item}/> 
 
     &nbsp; 
 
     <input type='submit' value='Add' className="btn btn-success"/><br/> 
 
     <input type='text' ref='item' onChange={this.onChange} value={this.state.item}/> 
 
     &nbsp; 
 
     <input type='submit' value='Change Text' className="btn btn-success"/> 
 
    </form> 
 
    </div> 
 
); 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <TodoApp/>, document.getElementById('todo')); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 

 
<div id="todo" />

+1

質問を正しく説明してください。 –

+0

大丈夫です!実際に私はtodobanner関数()のテキストを変更するには、2番目の入力ボックスの値をクリックして、レンダリング関数の2番目のボタン()から助けてください!@RIYAJKHAN – gkr

+0

@gkraj私の答えを参照してください –

答えて

0

私はあなたが何を意味するか取得していない怖いです。このようなことを意味しましたか?

https://jsfiddle.net/alfrcr/upzqf067/1/

もしそうなら、「藤堂アプリケーション」のテキストを変更するために、あなたは上のコンポーネントにフォームの状態を送信する必要があります。

したがってTodoBannerは、「そのフォームの状態」にpropsとしてアクセスできます。 (コード例を参照)

関連する問題