React 中 array.map 和 onchange 的使用

Question

下面的代码包含一个array.map 函数term 和i 的函数是什么，它是从哪里得到的，array.map 和onchange 的作用是什么

import React, { Component } from 'react';

class Apps extends Component {

componentDidMount() {
}

iLikeFunctions() {
console.log('yay functions');
}

render() {

var array = ['here','we','go'];

var no = 'yes';
const display = 'My Name';

return (
  <div>
    <p>{display}</p>
    <hr />
    <input type="text" onChange={this.iLikeFunctions} />
    <table>
      <tbody>
        {array.map((term,i) => {
          no = 'no';
          return (
            <tr key={i}>
              <td>{term}</td>
              <td>{no}</td>
            </tr>
          )
        })}
      </tbody>
    </table>
  </div>
 );

  }
}

export default Apps;

Answer 1

地图：

map() 方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。所以在下面一行：

array.map((term,i)

您正在映射名为array 的数组并循环遍历该数组，为数组中的每个值分配单词term，并为每个数组元素返回一个tr 元素及其各自的值、索引和变量字符串印在<tr>上。

键：

i 是作为键的相应值的索引，因为您没有为元素指定唯一键 ID。

“键”是创建元素列表时需要包含的特殊字符串属性。键可帮助 React 识别哪些项目已更改、添加或删除。

请注意，如果项目的顺序可能发生变化，不建议对键使用索引。这会对性能产生负面影响，并可能导致组件状态出现问题。

查看官方React Docs 中的keys 部分，了解更深入的按键说明。

onchange：

onchange 监视输入字段是否有任何更改，当它检测到更改时，它会运行 iLikeFunctions()。

---

tldr: 上面的代码循环遍历数组['here','we','go']; 并为每个值返回一个<tr>。每当输入字段值更改时，它也会运行iLikeFunctions()。