Facebook React.js :: 如何创建表单输入字段并设置类型、自动对焦、必需等

Question

我可以使用 REACTjs 创建表单输入字段，如下所示：

React.render(
  React.createElement('input', null, 'Hello, text input'),
  document.getElementById('example')
);

React.render(
  React.createElement('textarea', null, 'Hello, textarea'),
  document.getElementById('example')
);

我想要的输入字段需要类似于这样：

 <input autofocus type="text" name="name" placeholder="John Doe" required>

或

 <input type="url" name="website" pattern="(http|https)://.+" required>

如何使用 React.createElement(); 设置 autofocus、type、palceholder 和 required？

我是否使用 props 对象？

Answer 1

这是我使用过的代码示例

JSX

<button type="submit" className="postfix" disabled={this.isDisabled()}>Automate</button>

没有 JSX

React.createElement('button', {
    type: 'submit',
    className: 'postfix',
    disabled: this.isDisabled()
}, 'Automate')

您只需使用作为 React.createElement();

的第二个参数的属性对象

有关受支持属性的更多信息：https://facebook.github.io/react/docs/tags-and-attributes.html

Answer 2

是的，createElement uses the second props argument for (supported) attributes。

所以你可以这样写：

React.createElement('input', { placeholder: 'Enter a url', type: 'url', autoFocus: true }, 'default_url');

Facebook React.js :: 如何创建表单输入字段并设置类型、自动对焦、必需等

Facebook React.js :: how to create form input field and set type, autofocus, required etc

reactjs