Question

我有一个使用React和Bootstrap的小应用程序。试图让页面（主页组件）只显示一个表单。该捆绑包是有效的，但我看到的只是一个空白页面，其中缺少所有其他组件。我做错了什么？

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

Answer 1

固定。似乎问题出在关闭标签和复选框输入类型中的缺失值。这是代码。

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

} }

Answer 2

我在这里纠正了你的问题 - JSFiddle

将for属性替换为htmlFor，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'));

React中的表格没有显示

2 个答案: