這是「React.js」這樣做的方式嗎？

Question

我以React開頭，我試圖創建一個簡單的表單，說你好名稱！

但是我覺得有2個狀態元素不是正確的方法來做到這一點。

有誰知道或相信有更好的方法來做到這一點？順便說一下，我知道我可以將名稱狀態綁定到h2，但我希望它在點擊時發生。

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

一個狀態就夠了。

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

您可以使用refs來獲取輸入值。 我想你想這樣的效果，這裏是demo

這裏裁判的more-about-refs