reactjs – 在React.js表单组件中使用状态或引用?

前端之家收集整理的这篇文章主要介绍了reactjs – 在React.js表单组件中使用状态或引用?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我从React.js开始,我想做一个简单的形式,但在documentacion我找到了两种方法
first one正在使用参考:
var CommentForm = React.createClass({
      handleSubmit: function(e) {
        e.preventDefault();
        var author = React.findDOMNode(this.refs.author).value.trim();
        var text = React.findDOMNode(this.refs.text).value.trim();
        if (!text || !author) {
          return;
        }
        // TODO: send request to the server
        React.findDOMNode(this.refs.author).value = '';
        React.findDOMNode(this.refs.text).value = '';
        return;
      },render: function() {
        return (
        <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
        </form>
      );
      }
    });

second one在React组件中使用状态:

var TodoTextInput = React.createClass({
  getInitialState: function() {
    return {
      value: this.props.value || ''
    };
  },render: function() /*object*/ {
    return (
      <input className={this.props.className}
      id={this.props.id}
      placeholder={this.props.placeholder}
      onBlur={this._save}
      value={this.state.value}
      />
    );
  },_save: function() {
      this.props.onSave(this.state.value);
      this.setState({value: ''
    });
  });

我看不出两种选择的利弊,如果有的话。
谢谢。

短版本:避免refs。

它们不利于可维护性,并且失去了WYSIWYG模型渲染提供的许多简单性。

你有一个表格。您需要添加一个重置表单的按钮。

> refs:

>操纵DOM
> render描述了3分钟前表单看起来的样子

>状态

> setstate
> render描述表单的外观

在输入中有一个CCV号字段,在应用程序中有一些其他字段是数字。现在你需要强制用户只输入数字。

> refs:

>添加一个onChange处理程序(不是我们使用refs来避免这个?)
>如果不是数字,在onChange中操纵dom

>状态

>你已经有一个onChange处理程序
>添加一个if语句,如果它无效则什么都不做
> render只有当它产生不同的结果时才被调用

嗯,永远不会,PM想让我们只是做一个红色的盒子阴影,如果它是无效的。

> refs:

> make onChange处理程序只是调用forceUpdate或什么?
> make render输出基于… huh?
>我们在render中获取要验证的值在哪里?
>手动操作元素的className dom属性
>我迷路了
>重写没有refs?
>从dom中读取渲染如果我们安装否则认为有效?

>状态:

> remove if语句
> make render基于this.state验证

我们需要将控制权交给父母。数据现在在道具,我们需要对变化做出反应。

> refs:

>实现componentDidMount,componentWillUpdate和componentDidUpdate
>手动比较以前的道具
>用最小的变化集操纵dom
>嘿!我们正在实施反应…
>还有更多,但我的手指伤了

>状态:

> sed -e’s / this.state / this.props /”s / handleChange / onChange /’-i form.js

人们认为引用比保持状态更容易。这可能是真的在前20分钟,这不是真的在我的经验之后。让你的自我在一个位置说:“是的,我会在5分钟内完成,而不是”当然,我只是重写一些组件“。

原文链接:https://www.f2er.com/react/303438.html

猜你在找的React相关文章