问题描述
我试图理解为什么以下内容不会例如使用 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
也存在错误,尽管我认为对此有更好的反应方法-有什么想法吗?感谢您的帮助