对于每个不返回正确值的简单反应

如何解决对于每个不返回正确值的简单反应

我试图理解为什么以下内容不会例如使用 joe bloggs 之类的输入并使用forEach函数返回“ Joe”（带有大写字母J）而不是经典的for循环（注释掉）。

我将表单作为一个简单的组件：

    import React from 'react';
    
    const SignupForm = () => {
      const onSubmit = (e) => {
        let name = e.target.closest('form').querySelector('input[name="name"]'),nameVal = name.value;
    
        // 1. Gets first name only if full name provided
        nameVal = nameVal.split(' ')[0];
    
        // 2. Capitalises name first letter only & lowercase the rest
        nameVal = nameVal.split('');
        /*for (let i = 0; i < nameVal.length; i++) {
          if (i == 0) {
            nameVal[i] = nameVal[i].toupperCase();
          } else {
            nameVal[i] = nameVal[i].toLowerCase();
          }
        }*/
/* CODE BELOW HERE */
        nameVal.forEach((cur,i) => {
          console.log('cur',cur,'i',i);
          return i == 0 ? cur.toupperCase() : cur.toLowerCase();
        });
/* CODE ABOVE HERE */
    
        console.log('nameVal Now',nameVal);
    
        nameVal = nameVal.join('');
        name.value = nameVal;
    
        console.log('test form submit',e.target,'nameVal: ',nameVal);
      };
    
      return (
        <div id='em-signup-form'>
          <h2>Enter Details:</h2>
          <form id='prospect-form'>
            <label htmlFor='name'>Name:</label>
            <input
              type='text'
              name='name'
              placeholder='Name*'
              required='required'
              pattern='[a-zA-Z ]+'
              oninvalid="setCustomValidity('Invalid Name')"
              oninput="setCustomValidity('')"
            />
            <label htmlFor='email'>Email Address:</label>
            <input
              type='text'
              name='email'
              placeholder='Email*'
              required='required'
              pattern='[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$'
              oninvalid="setCustomValidity('Invalid Email')"
              oninput="setCustomValidity('')"
            />
            <input type='hidden' name='tag' value='randomTag' />
            <button type='submit' className='btn-std' onClick={onSubmit}>
              Add Subscriber
            </button>
          </form>
        </div>
      );
    };
    
    export default SignupForm;

请注意以下相关部分：

nameVal.forEach((cur,i);
          return i == 0 ? cur.toupperCase() : cur.toLowerCase();
        });

我认为这里实际上没有任何更改，因此跳过了传递，因此我将其更改为以下内容：

nameVal.forEach((cur,i) => {
      console.log('cur',i);
      i == 0 ? (cur = cur.toupperCase()) : (cur = cur.toLowerCase());
    });

但仍然没有。如何使用forEach函数而不是经典的for循环使代码工作？这似乎很简单，尽管我仍然习惯于ES6 +语法而不是ES5。

我知道oninvalid和oninput也存在错误，尽管我认为对此有更好的反应方法-有什么想法吗？感谢您的帮助

解决方法

您需要使用map来修改当前数组。两者之间的区别，here

,

实际上，您的主要问题不是关于ReactJS，它与Array上的函数循环有关。基于ES6 +，map函数返回一个新数组，并且不对给定数组进行更改。 forEach函数仅获得一个回调函数并在给定数组上运行。

因此，对于您的情况，应使用如下的 map 函数：

const Array = [1,2,3,4];
const newArray = Array.map(item => item + 2);

newArray现在为[3,4,5,6]。