我正在创建一个搜索表单,其中包含根据用户从选择框中进行的选择而变化的输入元素数量.
我将其分为三个组件,一个名为SearchContainer的包装器,一个名为SearchSelect的选择框,以及仅出于示例目的而在组件内部的SearchSearch和Two的输入.
应用程式
└─SearchContainer表格
│搜寻选择
│…多个搜索输入中的任何一个(SearchWithOne,SearchWithTwo)
当用户更改选择框的值时,将加载包含输入的相关组件.该组件可以有1到10个输入.我看过的所有示例都提到使用ref,如果我的输入保持不变,那将很棒.
我目前通过在SearchContainer的onSubmit处理程序中使用以下内容来使其工作
handleSubmit: function(e) {
e.preventDefault();
var form = this.getDOMNode();
[].forEach.call(form.elements, function(e){
// get the values
});
// submit the values to get results.
}
但是,这并不适合执行此操作.有没有更好的推荐方法来遍历子组件并读取其状态？还是可以以某种方式将子级传递给父级状态并以这种方式获取值？
解决方法:
我想我有一个fork of your fiddle形式的解决方案,下面将介绍主要思想.
首先,我不是React专家,但是我喜欢它的想法,并且我知道它越来越受欢迎,所以我想学习更多.我不知道使用composition or inheritance来减少如下所示的代码重复的正确方法.
基本上,我的想法是向每个搜索类添加一个方法,以将其状态暴露给调用类.这是通过createClass调用中的一个非常简单的函数实现的：
getData: function() {
return this.state;
},
非常简单,必须有一种方法可以使用此方法创建基类或mixin类,然后与其他类继承/组合.我只是不确定如何.现在,您仅可以在需要暴露组件状态的地方复制粘贴这些行.
请记住,这是每个人都喜欢的Flux架构的反面.在Flux中,状态始终来自存在于React组件外部的源对象.
无论如何,暂时放弃较大的体系结构问题,您只需在handleSubmit方法中调用getData即可获取该状态变量.不需要DOM遍历：
handleSubmit: function(e) {
e.preventDefault();
var form = this.getDOMNode(),
fd = new FormData(form);
var submitData = this.state.SearchBox.getData();
// submit the values to get results.
},
标签：reactjs,javascript 来源： https://codeday.me/bug/20191120/2045890.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。