在React中使用array.map和onchange [英] Use of array.map and onchange in React

问题描述

下面的代码包含一个 array.map 函数， term 和 i 的功能是什么，它是从哪里来的，又是什么?做 array.map 和 onchange 做

The code below contains an array.map function what is the function of term and i and where was it gotten from, and what does the array.map and the onchange do

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;

推荐答案

地图:

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

Map:

The map() method creates a new array with the results of calling a provided function on every element in the calling array. So in the following line:

array.map((term,i)

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

You are mapping the array called array and looping through the array, assigning the word term for each value in the array and return a tr element for each array element with their respective value, index and variable string printed on the <tr>.

i 是用作键的各个值的索引，因为您没有为元素指定唯一的键ID.

i is the index of the respective value which acts as a key since you didn't specify unique key ids for the elements.

键"是特殊的字符串属性，在创建元素列表时需要包括在内.按键可帮助React识别哪些项目已更改，添加或删除.

A "key" is a special string attribute you need to include when creating lists of elements. Keys help React identify which items have changed, are added, or are removed.

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

Do note that it is not recommended to use indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state.

在官方React Docs 对键进行更深入的说明.

Check out the keys section in the official React Docs for a more in-depth explanation of keys.

onchange 监视输入字段中的任何更改，并在检测到更改时运行 iLikeFunctions().

onchange watches the input field for any change and when it detects a change, it runs the iLikeFunctions().

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

tldr: The above code loops through array ['here','we','go']; and returns a <tr> for each value. It also runs the iLikeFunctions() whenever the input field value is changed.

这篇关于在React中使用array.map和onchange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！