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}/>
<input type='submit' value='Add' className="btn btn-success"/><br/>
<input type='text' ref='item' onChange={this.onChange} value={this.state.item}/>
<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" />
質問を正しく説明してください。 –
大丈夫です!実際に私はtodobanner関数()のテキストを変更するには、2番目の入力ボックスの値をクリックして、レンダリング関数の2番目のボタン()から助けてください!@RIYAJKHAN – gkr
@gkraj私の答えを参照してください –