reactjs - 如何将文本输入返回到 React 组件

Question

我是编程新手，但我有一个简单的问题。很抱歉，如果这不适用，但我正在尝试学习教程并为我自己的 super 简单程序实现概念。我想接受一个简单的文本输入并将其返回到组件内。我知道这应该非常简单，但当我返回时，我不知道在表单元素 b/c 上设置“操作”的内容 {this.props.myformrefID} 我在此处收到“请使用 POST 请求”错误: https://jsfiddle.net/69z2wepo/38225/#&togetherjs=3AARPdP6c0

 Edit in JSFiddle
JavaScript 1.7
HTML
CSS
Resources
Result
var Hello = React.createClass({
  render: function() {
    return <div>Hello here we go {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="James" />,
  document.getElementById('container')
);

HTML

    <script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="headline">
<form className="adwords-ad">
    <h2>Enter your Headline</h2>
    <input type="text" ref="adID" required />
    <input type="Submit" />
</form>
</div>
</div>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Answer 1

我将假设您正在使用表单来更新消息。如果是这样，我会这样处理:

表单提交版本:

https://jsfiddle.net/69z2wepo/38235/

实时编辑版本:

https://jsfiddle.net/65cgjy2b/1/

实时编辑版本 - 准系统

https://jsfiddle.net/65cgjy2b/2/

下面的代码适用于“表单提交”版本，因为它更复杂。

var Hello = React.createClass({
  render: function() {
    return <div>{this.props.message}</div>;
  }
});

var Form = React.createClass({
    render: function() {
    return (
      <form onSubmit={this.props.onSubmit} className="adwords-ad">
        <h2>Enter your Headline</h2>
        <input 
          onChange={this.props.onChange} 
          value={this.props.value} 
          type="text" 
          required 
        />
        <input type="Submit" />
      </form>
    );
  }
});

var App = React.createClass({

  getInitialState: function() {
    return { message: "", savedMessage: "" };
  },

  onSubmit: function(e) {
    e.preventDefault();
    this.setState({
      message: "", 
      savedMessage: this.state.message
    });     
  },

  onChange: function(e) {
    this.setState({message: e.target.value});
  },

  render: function() {
    return (
        <div> 
          <Form 
            onSubmit={this.onSubmit} 
            onChange={this.onChange} 
            value={this.state.message} 
          />
          <Hello message={this.state.savedMessage} />
      </div>
    )
  }
});

ReactDOM.render(<App></App>, document.getElementById('container'));

上面的想法是，我们有一个“App”组件来管理应用程序的状态，并让每个组件访问回调以更新状态(当填写表单和提交表单时)。

上面的示例不会在您键入时填写标题 - 尽管您可以轻松地这样做 - 我从您的原始表单(带有提交按钮)假设您只希望在表单完成后更新文本已提交。