Ist dies der "React.js" Weg dies zu tun?

Question

Ich beginne mit React und ich habe versucht, ein einfaches Formular zu erstellen, das sagt Hallo Name!

Allerdings habe ich das Gefühl, 2 Zustandselemente zu haben ist nicht der richtige Weg, dies zu tun.

Weiß jemand oder glaubt es gibt einen besseren Weg, dies zu tun?

Übrigens, ich weiß, ich kann nur den Namen Zustand an die h2 binden, aber ich will es auf Klick geschehen.

var Name = React.createClass({ 
       getInitialState:function(){ 
        return { 
         inputname:'', 
         h2name:'' 
        }; 
       }, 
       showName:function(event){ 
        event.preventDefault(); 
        this.setState({h2name:this.state.inputname}); 
       }, 
       updateName:function(event){ 
        this.setState({inputname:event.target.value}); 
       } 
       , 
       render:function(){ 
        return (
         <div> 
          <form onSubmit={this.showName}> 
           <input onChange={this.updateName} placeholder="Enter your name"></input> 
           <button type="submit">Show</button> 
          </form> 
          <h2>Hello {this.state.h2name}!</h2> 
         </div> 
        ); 
       } 
      }); 
ReactDOM.render(<Name />,document.getElementById('mount-point')); 

Answer 1

ein Zustand ist genug.

var Name = React.createClass({ 
    getInitialState: function() { 
     return { 
      inputname: '' 
     }; 
    }, 
    showName: function (event) { 
     event.preventDefault(); 
     this.setState({ inputname: this.refs.inputname.value }); 
    }, 

    render: function() { 
     return (
      <div> 
       <input ref="inputname" placeholder="Enter your name"></input> 
       <button onClick={this.showName}>Show</button> 
       <h2>Hello {this.state.inputname}!</h2> 
      </div> 
     ); 
    } 
}); 
ReactDOM.render(<Name />, document.getElementById('root')); 

Sie können Refs verwenden, um den Eingabewert zu erhalten. Ich denke, man diesen Effekt wollen, hier ist die demo

hier wird das Dokument von Refs more-about-refs