ReactJS如何循环动态命名的引用

标签 reactjs

我正在查看一行代码,它为输入动态命名了 refs,其中“item”是从零开始的递增值。

“输入类型=“文本”ref={'name'+item}defaultValue={item}/>”

我如何循环遍历这些动态引用来提取值?我尝试过这个但没有运气。它告诉我对象未定义。 (输入的长度将等于添加元素的数量)

var arr = this.state.inputs;
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
    var c = this.refs.name + i.value
    alert(c);
}

虽然,这确实有效,但它是动态的,所以我需要循环它,而不是硬编码它:

alert(this.refs.name0.value);
alert(this.refs.name1.value);
alert(this.refs.name2.value);

最佳答案

我相信你需要获取输入的 DOM 对象,而不仅仅是引用(至少这是我的经验):

import ReactDOM from 'react-dom';

const values = {}; 
Object.keys(this.refs)
    .filter(key => key.substr(0,4) === 'name')
    .forEach(key => {
        values[key] = ReactDOM.findDOMNode(this.refs[key])).value || null;
    });

祝你好运!

关于ReactJS如何循环动态命名的引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39357759/

相关文章:

javascript - 将两个数组写在一起是什么意思?

javascript - 文本动画中的平滑淡入淡出不起作用 - React Typescript

javascript - 如何将普通 JS 对象转换为 Immutable 集合?

ios - 未找到构建 ios 应用程序 <React/RCTUtils.h> 时 React Native 中的词法或预处理器问题

reactjs - 如何在 react.js 的 Material UI 中更改 DialogTitle 和 DialogContent 中的字体颜色

reactjs - 当我转到我的域名时,它会转到我的应用程序,但只在地址栏中显示 IP 地址

javascript - Express.js 服务器端渲染 - 请求 '/json/version/

reactjs - SSR React 与 redux 存储的数据

javascript - 如何通过 ECMA6 导入引入远程 React 组件?

javascript - 终极版/传奇 : Approach for larger API's