2016-10-26 62 views
0

私はリアクトとブートストラップを持つ小さなアプリを持っています。フォームのみが表示されたページ(ホームコンポーネント)を作成しようとしています。バンドルはVALIDですが、私が見ているのは、他のすべてのコンポーネントがない空白のページだけです。私は間違って何をしていますか?フォームが反応しない

import React from 'react'; 

export class Home extends React.Component { 
render() { 
return(
    <div> 
    <form> 
    <div className="form-group"> 
     <label for="email">Email address:</label> 
     <input type="email" className="form-control" id="email"></input> 
    </div> 
    <div className="form-group"> 
     <label for="pwd">Password:</label> 
     <input type="password" className="form-control" id="pwd"></input> 
    </div> 
    <div className="checkbox"> 
     <label><input type="checkbox"> Remember me</input></label> 
    </div> 
    <button type="submit" className="btn btn-default">Submit</button> 
    </form> 
    </div> 
); 
} 
} 
+0

は、コンソールにエラーをログに記録していますか? – KOTIOS

+0

はい、入力からエラーが発生しているようです。 'Error:inputはvoid要素のタグで、' children'も 'dangerouslySetInnerHTML'も使用してはいけません。 Homeのレンダリング方法を確認してください.' – NewbieOnRails

答えて

0

固定。問題はチェックボックスの入力タイプでタグを閉じていて、欠落していたようです。ここにコードがあります。

import React from 'react'; 

export class Home extends React.Component { 
render() { 
return(
    <div> 
    <div className="form-group"> 
     <label for="email">Email address:</label> 
     <input type="email" className="form-control" id="email" /> 
    </div> 
    <div className="form-group"> 
     <label for="pwd">Password:</label> 
     <input type="password" className="form-control" id="pwd" /> 
    </div> 
    <div className="checkbox"> 
     <label><input type="checkbox" value="remember" />Remember me</label> 
    </div> 
    <button type="submit" className="btn btn-default">Login</button> 
    </div> 
); 

}}

0

私はあなたのここに訂正 - JSFiddle

htmlForfor属性を元に戻し、inputは自動閉鎖する必要があります。クイックリファレンスについては

-

class Home extends React.Component { 
render() { 
return(
    <div> 
    <form> 
    <div className="form-group"> 
     <label htmlFor="email">Email address:</label> 
     <input type="email" className="form-control" id="email" /> 
    </div> 
    <div className="form-group"> 
     <label htmlFor="pwd">Password:</label> 
     <input type="password" className="form-control" id="pwd" /> 
    </div> 
    <div className="checkbox"> 
     <input type="checkbox" id="chkbox" /> 
     <label htmlFor="chkbox">Remember me</label> 
    </div> 
    <button type="submit" className="btn btn-default">Submit</button> 
    </form> 
    </div> 
); 
} 
} 
     React.render(<Home />, document.getElementById('container')); 
関連する問題