小编典典

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

reactjs

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

第一种是使用 参考文献

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

第二个是使用 状态 内的阵营组分:

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

如果存在,我看不到这两种选择的优缺点。谢谢。


阅读 260

收藏
2020-07-22

共1个答案

小编典典

简短版本:避免引用。


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

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

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

您在输入中有一个CCV数字字段,而在应用程序中还有一些其他数字字段。现在您需要强制用户仅输入数字。

  • 参考:
    • 添加一个onChange处理程序(我们不是使用引用来避免这种情况吗?)
    • 如果不是数字,则在onChange中操纵dom
    • 您已经有一个onChange处理程序
    • 添加一条if语句,如果无效,则不执行任何操作
    • 仅在将产生不同结果时才调用render

嗯,没关系,项目经理希望我们在无效的情况下只绘制一个红色的阴影。

  • 参考:
    • 使onChange处理程序仅调用forceUpdate之类的东西?
    • 使渲染输出基于…,是吗?
    • 我们从哪里获得在渲染中验证的值?
    • 手动操作元素的className dom属性?
    • 我迷路了
    • 没有参考重写?
    • 从渲染中的dom中读取(如果已安装),否则假定有效?
  • 州:
    • 删除if语句
    • 使渲染基于this.state验证

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

  • 参考:
    • 实现componentDidMount,componentWillUpdate和componentDidUpdate
    • 手动比较以前的道具
    • 以最小的变化来操纵dom
    • 嘿!我们正在实施反应中的反应…
    • 还有更多,但我的手指受伤
  • 州:
    • sed -e 's/this.state/this.props/' 's/handleChange/onChange/' -i form.js

人们认为裁判比保持状态更“容易”。这可能在最初的20分钟内是正确的,但根据我的经验,那是不正确的。让您自己说“是的,我会在5分钟内完成”,而不是“当然,我会重写一些组件”。

2020-07-22