Question

在以<p/>形式使用此Bootstrap CSS的自定义ReactJS组件之后使用时，我无法获得<br/>或<div className="col-sm-10">来创建新行。

var MyChatClientView = React.createClass({
  render: function() {
    return (
      <div>
        <h2>Chat</h2>
        <span>Type something</span>

        <MyChatForm />

        <p/>
        <br/>

        <div>
           This text is on the same line as MyChatForm, I want it on a new line!
        </div>  
      </div>
    );
  }
});

var MyChatForm = React.createClass({

handleSubmit: function(e) {
    e.preventDefault();

    var myChatTxt = this.refs.myChatTxt.getDOMNode().value.trim();
 },

 render: function() {
    return (
    <div>
      <form role="form" onSubmit={this.handleSubmit}>

        <div className="form-group">
           <input type="textarea" className="form-control" id="post-chat" ref="myChatTxt" />
        </div>

        <div className="form-group">
          <div className="col-sm-10">
            <button type="submit" className="btn btn-primary btn-lg btn-block">Send</button>
          </div>
        </div>

      </form>
    </div>
  );
  }
});

Answer 1

要使用Bootstrap调整表单控件的大小，要么（1）您的表单需要form-horizontal类，要么（2）您的列需要包含在row类的元素中。

这在Bootstrap文档的control sizing部分中介绍。

在您的情况下，将form-group替换为所需的row似乎是有意义的：

var MyChatForm = React.createClass({

  handleSubmit: function(e) {
    e.preventDefault();

    var myChatTxt = this.refs.myChatTxt.getDOMNode().value.trim();
  },

  render: function() {
    return (
      <div>
        <form role="form" onSubmit={this.handleSubmit}>

          <div className="form-group">
             <input type="textarea" className="form-control" id="post-chat" ref="myChatTxt" />
          </div>

          <div className="row">
            <div className="col-sm-10">
              <button type="submit" className="btn btn-primary btn-lg btn-block">Send</button>
            </div>
          </div>

        </form>
      </div>
    );
  }
});

ReactJS <p>或不在render（）</p>中工作

1 个答案: