ReactJSの新しいコンポーネントを削除して入れてください

私はReactJSの新機能を教えてくれるので、どこに間違っているのか教えてください。特定のdivに詳細を入力したいのですが、古いコンテンツを置き換える同じdivに登場する必要があります。ReactJSの新しいコンポーネントを削除して入れてください

私はあなたが反応の基礎から開始する必要があるコード

<body> <div id="container1"></div> <div id="container2"></div> 
    <script type="text/babel"> 
    var userName; 
    var company; 
    var Example =React.createClass({ 
     display:function(){ 

     userName=this.refs.userName.value; 
     document.getElementById('para').innerHTML = userName; 

     company=this.refs.company.value; 
     document.getElementById('para').innerHTML = company; 
     }, 

     render:function(){ 
      return(
       <div> 
       <form> 
       Username <input type="text" ref="userName"></input><br></br>      
       Comapany <input type="text" ref="company"></input> <br></br>       
       <button onClick={this.display} type="submit">Display</button> 
       <Results /> 
       </form> 
       </div> 
      ); 
      } 
     }); 

    var Results = React.createClass({ 
     render: function() { 
      return (
       <div id="results"> 
       <p id="para"> {userName} {company} </p> 
       </div> 
     ); 
     } 
    }); 
     ReactDOM.render(<Example />,document.getElementById('container1')); 
     ReactDOM.render(<Results/>,document.getElementById('container2')); 
    </script></body>

出典

2016-12-09 developer_beginning

ReactJSの基本から始めるべきだと思います –

の私の作品を添付しています。

class Test extends React.Component { 
    constructor(props){ 
     super(props); 

     this.state = { 
     username: '', 
     company: '', 
     showResults: false 
     } 
    } 

    handleChange(field, e){ 
     let state = this.state; 
     state[field] = e.target.value; 
     this.setState({state}); 

    } 

    display(){ 
     this.setState({showResults: !this.state.showResults}) 
    } 

    render(){ 
     let showResults = this.state.showResults ? <Results {...this.state} /> : ""; 
     return (
     <div> 
      Username <input type="text" name="username" onChange={this.handleChange.bind(this, "username")} value={this.state.username}/><br></br>      
      Comapany <input type="text" name="company" onChange={this.handleChange.bind(this, "company")} value={this.state.company}/> <br></br>       
      <button onClick={this.display.bind(this)} type="submit">Display</button> 
      {showResults} 
     </div> 
    ) 
    } 
} 

class Results extends React.Component { 
    render(){ 
     return (
      <div id="results"> 
       Username : {this.props.username} <br /> 
       Company : {this.props.company} 
      </div> 
     ) 
    } 
} 

React.render(<Test />, document.getElementById('container'));

Here is fiddle.

しかし、私はあなたが反応の最初の基礎を学ぶため、それを理解できないだろうと仮定し、次のようにあなたがあなたの問題を解決することができthisまたはthis

を確認してください。

出典

2016-12-09 09:28:58 Boky

ReactJSの新しいコンポーネントを削除して入れてください

答えて

関連する問題