【原】React操作表单

  • Z时代
  • 2024-01-10
  • 分类：综合

react

最近的项目中开发中都是用react,其中有用到react去操纵表单。然后自己就在每个表单元素中添加 ref,  然后再像jquery操作dom一样去操纵这个ref,

代码如下：

首先我在每个表单元素那里都加了ref

然后再像操作dom一样操作表单

整个过程看起来即累赘，又感觉很怪。这样你还不如直接用jqurey来操作dom.

　　在这里，想补充一下 react 中的ref到底为何物

ref 属性可以是一个回调函数，而不是一个名字。这个回调函数在组件安装后立即执行。被引用的组件作为一个参数传递，且回调函数可以立即使用这个组件，或保存供以后使用(或实现这两种行为)。

它与把 ref 属性分配给从 render 返回来的东西一样简单.

完成的示例

var App = React.createClass({
    getInitialState: function() {
      return {userInput: ''};
    },
    handleChange: function(e) {
      this.setState({userInput: e.target.value});
    },
    clearAndFocusInput: function() {
      // Clear the input
      this.setState({userInput: ''}, function() {
        // This code executes after the component is re-rendered
        React.findDOMNode(this.refs.theInput).focus();   // Boom! Focused!
      });
    },
    render: function() {
      return (
        <div>
          <div onClick={this.clearAndFocusInput}>
            Click to Focus and Reset
          </div>
          <input
            ref="theInput"
            value={this.state.userInput}
            onChange={this.handleChange}
          />
        </div>
      );
    }
  });

在这个例子中，render 函数返回 <input/ > 实例的描述。但真正的实例是通过 this.refs.theInput 访问的。只要带有 ref =“theInput” 的子组件从 render 返回，this.refs.theInput 就会访问适当的实例。这甚至能在更高的级别(non-DOM)组件中实现，如 <Typeahead ref = " myTypeahead " / >。

总结

向一个特定的子实例发送消息，Refs 是一个很好的方式，而通过流动式接收 Reactive 的 props 和 state 的方式可能是不方便的。然而，对于你的应用程序中的流动数据来说，refs 应该不是你的首选抽象特性。默认情况下，为用例使用 Reactive 数据流并保存 refs 本来就是无功无过的。

好处：

  • 你可以在组件类中定义任何公共方法(如在 Typeahead 中的复位方法)，并通过 refs(如this.refs.myTypeahead.reset())调用这些公共方法。

  • 执行 DOM 测量几乎总是需要接触“本地”组件，如 <input/ >，并通过 React.findDOMNode(this.refs.myInput)访问它的底层 DOM 节点。Refs 是可行的可靠的方法之一。

  • refs 自动为你 book-kept!如果子组件被摧毁，那么它的 ref 也被摧毁了。在这里不必担心内存(除非你为保留自己的 reference 做了一些疯狂的事)。

注意事项：

  • 永远不要访问组件的 render 方法内部的 refs——或任何组件的 render 方法正在 call satck 中运行时，也不要访问 refs。

  • 如果你想保存 Google Closure Compiler Crushing 的弹性，确保永远不要访问作为字符串被指定的属性。这意味着如果你的 ref 被定义为 ref =“myRefString”，你必须使用 this.refs['myRefString'] 来访问。

  • 如果你还没有用 React 给几个应用程序编程，那么你通常首先会倾向于尝试使用 refs 来“让事情发生”在你的应用程序中。如果是这样的话，花点时间，更为慎重的思考一下 state 应该属于组件层次结构的什么位置。通常情况下，你会清楚地发现，“拥有”那个 state 的适当的位置是更高的层次结构中。把 state 放置在那里通常可以消除任何想要使用 ref 来“让事情发生”的现象——相反，数据流通常会实现你的目标。

上面的介绍参考：http://wiki.jikexueyuan.com/project/react/more-about-refs.html

　　看的不是很懂。不过总结出，如果我像我上面那样去操作一大丢的表单的话，会影响数据流的执行

所以我将我的代码改为如下：

首先，在初始状态，设置表单的值

然后，将表单的ref值去掉，而是动态的来给它赋值

再之后， 给每个表单添加这些时间，让它输入框每次变化的时候，都更新表单value对应的state。下面是每个表单对应的事件

最后，将这些事件添加到表单的onChange中

通过这样的修改，每次我的输入框发生变化时，表单value对应的state就会更新，从而达到操纵表单的效果。

结合着ajax的话，我们只需要获取每个表单的当前的state就行。比如，我要获取price这个元素的值，我只需要var priceValue=this.state.price既可。

而不需要去操作一系列的dom。因为是处于演示，所以每个表单的函数我就没有去封装了。共用一套看起来会好看点

如果有更好的办法，望多多指教！

以上是 【原】React操作表单 的全部内容， 来源链接： utcz.com/z/382127.html

回到顶部