在 React.js 表单组件中使用 state 或 refs? [英] Use state or refs in React.js form components?

问题描述

我从 React.js 开始，我想做一个简单的表单，但在文档中我找到了两种方法.

I am starting with React.js and i want to do a simple form but in the documentation I have found two ways of doing it.

第一个正在使用参考:

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>
    );
  }
});

还有 第二个 在 React 组件中使用 state:

And the second one is using state inside the React component:

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: ''
  });
});

我看不出这两种选择的优缺点(如果存在的话).谢谢.

I can't see the pros and cons of the two alternatives, if some exists. Thanks.

推荐答案

简短版本:避免引用.

它们不利于可维护性，并且失去了所见即所得模型渲染提供的许多简单性.

They're bad for maintainability, and lose a lot of the simplicity of the WYSIWYG model render provides.

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

You have a form. You need to add a button that resets the form.

• 参考:
  • 操作DOM
  • render 描述了表单 3 分钟前的样子
  • setState
  • render 描述表单的外观

  您的输入中有一个 CCV 数字字段，而您的应用程序中有一些其他数字字段.现在您需要强制用户只输入数字.

  You have an CCV number field in an input and some other fields in your application that are numbers. Now you need to enforce the user only enters numbers.

  • 参考:
    • 添加一个 onChange 处理程序(我们不是使用引用来避免这种情况吗?)
    • 在 onChange 中操作 dom，如果它不是数字
    • 您已经有一个 onChange 处理程序
    • 添加一个 if 语句，如果它无效什么都不做
    • render 只有在产生不同的结果时才会调用

    呃，没关系，如果它无效，PM 想让我们做一个红色的框阴影.

    Eh, nevermind, the PM wants us to just do a red box-shadow if it's invalid.

    • 参考:
      • 使 onChange 处理程序只调用 forceUpdate 或其他什么?
      • 根据...制作渲染输出，嗯?
      • 我们从哪里获得要在渲染中验证的值?
      • 手动操作元素的 className dom 属性?
      • 我迷路了
      • 不用引用就重写?
      • 如果我们已安装，则从渲染中的 dom 中读取，否则假定有效?
      • 删除 if 语句
      • 基于 this.state 进行渲染验证

      我们需要将控制权交还给父级.数据现在在 props 中，我们需要对变化做出反应.

      We need to give control back to the parent. The data is now in props and we need to react to changes.

      • 参考:
        • 实现 componentDidMount、componentWillUpdate 和 componentDidUpdate
        • 手动比较之前的 props
        • 以最少的更改操作 dom
        • 嘿！我们正在反应中实现反应...
        • 还有更多，但我的手指受伤了
        • sed -e 's/this.state/this.props/' 's/handleChange/onChange/' -i form.js

        人们认为引用比保持状态更容易".这在前 20 分钟内可能是正确的，在我之后的经验中就不是这样了.让你自己说是的，我会在 5 分钟内完成"，而不是当然，我会重写一些组件".

        People think refs are 'easier' than keeping it in state. This may be true for the first 20 minutes, it's not true in my experience after that. Put your self in a position to say "Yeah, I'll have it done in 5 minutes" rather than "Sure, I'll just rewrite a few components".

        这篇关于在 React.js 表单组件中使用 state 或 refs?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！