Question

作为序言，我是使用React.js的新手，所以我仍然非常学习如何使用React的基础知识。我试图将这个React表单呈现在我的网页上，但是由于某种原因它没有呈现。从字面上看，这实际上是我在React上所做的第一件事，因此，如果我真的搞砸了，请向进阶致歉。

我已经在浏览器中添加了扩展程序，这些扩展程序将允许React渲染并对我的代码进行一些小的修改，从而消除了我正在使用的浏览器（Google Chrome）中控制台上的所有错误，但表格仍未呈现。

    const React = require("react");
    const ReactDOM = require("react-dom");

    class LoginForm extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        userName: "",
        password: ""
    };

    this.handleInputChange = this.handleInputChange.bind(this);
}

handleInputChange(event) {
    const target = event.target;
    const value = target.type === "text";
    const name = target.name;
    this.setState({
        [name]: value
        // userName: event.target.userName,
        // password: event.target.password
    });
}

render() {
    return (
        <form class="col s12" method="POST">
            <div class="row">
                <div class="input-field col s12">
                    <input
                        name="userName"
                        id="username"
                        type="text"
                        class="validate"
                        value={this.state.userName}
                        onChange={this.handleInputChange}
                        required="true"
                        aria-required="true" />
                    <label for="username">
                        Username
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input
                        name="password"
                        id="password"
                        type="password"
                        class="validate"
                        value={this.state.password}
                        onChange={this.handleInputChange}
                        required="true"
                        aria-required="true" />
                    <label for="password">
                        Password
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <button id="loginBtn" class="waves-effect waves-light btn" type="submit" formaction="/login">
                        Login
                    </button>
                    <button id="signupBtn" class="waves-effect waves-light btn" type="submit" formaction="/signup">
                        SignUp
                    </button>
                </div>
            </div>
        </form>
    );
}
    }

    ReactDOM.render(LoginForm, document.getElementById("front_form"));

如前所述，我在浏览器控制台中没有收到更多错误之前，唯一的问题是表单无法呈现。

Answer 1

在render方法中的组件周围添加括号

ReactDOM.render(<LoginForm />, document.getElementById("front_form"));

还要确保front_form元素存在。

Answer 2

您要呈现LoginForm的实例：

 ReactDOM.render(
  <LoginForm />, // <<<
  document.getElementById("front_form")
);

我很惊讶，尽管它没有引发错误。

Answer 3

https://jsfiddle.net/anujladia/zv4893gt/

这是解决上述问题的方法。表单正在呈现。有一项重要的更改将使表单呈现出来。

ReactDOM.render(<LoginForm />,
  document.getElementById("app")
);

由于您已经尝试过此操作，因此请您在尝试插入此表单的位置也检查ID [front_form]。可能这也可能是错误的。

希望如此。如果是，则继续。

由于您是新来的反应者。我还发现了其他一些问题，我想在这里纠正。

在handleInputChange中，值将为target.value
class将为className
for将为htmlFor
在反应中，您无需添加required =“ true”，只需添加required就足够了。

2、3、4也将进入控制台。

如何获取此React表单以呈现到页面上？

3 个答案: