React bileşenine metin girişi nasıl dönülür?

Question

Genel olarak programlamada yeniyim, ancak basit bir sorum var. Bu uygun değilse de öğreticiyi alıp kendi süper için konseptleri uygulamaya çalışıyorum. basit bir program. Basit bir metin girişi alıp bir bileşenin içine döndürmek isterim. Bunun çok basit olması gerektiğini biliyorum, ancak {this.props.myformrefID} döndürdüğümde form öğesi b/c için "eylemi" ne ayarlayacağımı anlamıyorum. : 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

Ben mesajı güncellemek için form kullanıyorsanız varsayım yapacaktır. Eğer öyleyse, ben bunu böyle çözecek:

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

Canlı Düzenleme Versiyon:

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

Canlı Düzenleme Sürüm - Barebone

Formu Versiyon Gönder

Aşağıda

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

kod thats daha karmaşık, "Form Gönderme" sürümü içindir.

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')); 

biz uygulamanın durumunu yönetir ve form doldurulur ne zaman ve form gönderildiğinde durumunu (güncellemek için geri aramaları için her bileşenleri erişim sağlayan bir "Uygulama" bileşeni olduğunu olmanın yukarıdaki fikri).

Yukarıdaki örnek, siz yazarken başlığını doldurmuyor - bu şekilde kolayca yapabiliyor olmanıza rağmen - orijinal formunuzdan (bir gönder düğmesiyle), yalnızca metnin bir kez formda güncellenmesini istediğinizi varsaydım gönderilmişti.