Question

我是一般的编程新手，但我有一个简单的问题。如果这不适用但我正在尝试接受教程并为我自己的超级简单程序实现这些概念。我想采用简单的文本输入并将其返回到组件内部。我知道这应该非常简单，但是当我返回时，我不知道在表单元素b / c上设置“action”的内容 {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/

实时编辑版本 - Barebones

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”组件来管理应用程序的状态，并为每个组件提供对回调的访问以更新状态（填写表单时以及提交表单时）。

上面的示例并未在您键入时填写标题 - 尽管您可以轻松地按此方式执行 - 我假设您从原始表单（使用提交按钮），您只希望文本在表单更新后更新提交。

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

1 个答案: