javascript - 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 :

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

array.map((term,i)

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

键:

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

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

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

查看 keys官方栏目React Docs以获得对键的更深入的解释。

改变时:

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

---

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