Question

我正在处理React.js教程：https://facebook.github.io/react/docs/tutorial.html

我让一切都按预期工作，但出于某种原因，当我使用类将其他HTML应用于我的表单时，样式不适用。我已经查看了一些其他文档，但找不到其他HTML无法呈现的原因。

表单元素将呈现，但“big-XX columns”类将不会呈现。

有什么想法吗？

var CommentForm = React.createClass({
 handleSubmit: function(e) {
    e.preventDefault();
    var creator = this.refs.creator.value.trim();
    var mr = this.refs.mr.value.trim();
    var message = this.refs.message.value.trim();
    var csrfmiddlewaretoken = this.refs.csrfmiddlewaretoken.value.trim();
    if (!creator || !mr || !message || !csrfmiddlewaretoken ) {
        return;
    }
    this.props.onCommentSubmit({creator:creator, mr:mr, message:message, csrfmiddlewaretoken: csrfmiddlewaretoken})
    this.refs.creator.value = '';
    this.refs.mr.value = '';
    this.refs.message.value = '';
    return;
},

render: function() {
return (
  <form className="commentForm" onSubmit={this.handleSubmit}>
    <div class="row">
        <div class="large-10 columns">
            <input type="hidden" ref="csrfmiddlewaretoken" value="{{ csrf_token }}" />
            <input type="hidden" ref="creator" value="{{ globalEmployee.id }}" />
            <input type="hidden" ref="mr" value="{{ mr.id }}" />
            <input type="text" ref="message" placeholder="Add a comment..." />
        </div>
        <div class="large-12 columns">
        </div>
        <div class="large-2 columns">
            <input type="submit" value="Post" class="button tiny expand" />
        </div>
    </div>
  </form>
);
 }
});

Answer 1

而不是像class元素中那样className使用form。

来自HTML Tags vs. React Components：

由于JSX是JavaScript，所以标识符如class和for 不鼓励为XML属性名称。相反，React DOM组件期望DOM属性名分别如className和htmlFor。

React.js模板无法正确渲染

1 个答案: