更改React-JS中的值

Question

当我单击"更改文本"按钮时，输出看起来像这样，如果它是空值（应该替换为空头），则应用该值替换该值（todoApplication）代码！任何人都可以编辑代码以获取解决方案！

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" />

Answer 1

我恐怕我没有得到你的意思。你的意思是这样吗？

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

如果是这样，为了更改" todo应用程序"文本，您应该将表单状态发送到上部。

因此， TodoBanner可以访问'该状态'作为 props。（请参阅示例代码）