我有一个登录表单，当页面打开时，Chrome会自动填写凭据。然而，input元素的onChange事件并没有被触发。
点击页面上任何位置都会将它们注册到input的value属性中，这正是我们需要的。我尝试使用event.target.click()，但没起作用。
在onChange中，我将值设置到状态(state)中：
this.setState({ email: event.target.value })
如果email.length === 0，则提交按钮将被禁用。
因此，即使页面显示凭据已填写，提交按钮仍然看起来是禁用的。
由于单击任何地方都会注册值，单击提交按钮也会在提交之前注册它们。 因此，它运行得很完美。
这不是关于时间的问题，该字段永远不会填充。 当我打开开发人员控制台进行检查时，值字段为空，直到我单击某个位置。
这里唯一的问题是，按钮看起来被禁用，因为除非单击某个东西，否则电子邮件输入值为空。 是否有一个巧妙的解决方案？
我遇到了这个问题，因为我也有同样的问题。这不是React特有的问题，而是一种通用问题。也许这会帮助其他遇到这个问题的人。
其他答案都没有真正回答问题。由OP所描述的问题是Chrome在页面没有用户交互之前不设置输入值。 这可能是单击页面，甚至是在控制台中键入任意内容。
在发生用户交互之后，输入的值被设置并触发更改事件。
您甚至可以通过视觉效果看到这一点，因为自动填充文本的样式在首次呈现时不同，并且在交互发生后更改为输入的样式。
另外：从代码触发单击或设置焦点都没有帮助，只有真正的人类交互。
因此，轮询值不是解决方案，因为如果未单击页面，则该值将保持为空。 同样声明不能依赖更改事件也不是很相关，因为事件确实会正确触发，但需要等待值的延迟设置。 没有确定的延迟才是问题。
但是，您可以轮询Chrome的伪CSS类的存在。 在Chrome 83（2020年6月）中，这些是：-internal-autofill-selected和：-internal-autofill-previewed。 然而，这些会定期更改。 而且，在呈现后它们并不直接存在。 因此，您应该设置足够的超时时间或轮询。
在vanilla JavaScript中的例子：
var input = document.getElementById('#someinput');
setTimeout(() => {
if (input.matches(':-internal-autofill-selected')) {
/* do something */
}
}, 500);
在这一点上，您仍然无法获取值，因此在这方面它仍然没有解决问题，但至少您可以根据自动填充数据的存在启用提交按钮（正如 OP 想要做的那样）。或者做一些其他视觉效果。
:-webkit-autofill（但现在请看Karim对:-internal-autofill-selected的使用）。 - Nate Anderson请查看此主题：检测浏览器自动填充
使用oninput而不是onchange可以解决问题。
event.target.click()将“模拟”点击并触发onClick()事件，但不像在浏览器窗口中的物理点击那样操作。
您是否已尝试使用focus()而不是（或除了）click()？您可以尝试将焦点放在输入元素上，然后检查值是否设置。如果有效，您可以在焦点和单击时添加this.setState({ email: event.target.value })。
const [wasInitiallyAutofilled, setWasInitiallyAutofilled] = useState(false)
useEffect(() => {
/**
* The field can be prefilled on the very first page loading by the browser
* By the security reason browser limits access to the field value from JS level and the value becomes available
* only after first user interaction with the page
* So, even if the Formik thinks that the field is not touched by user and empty,
* it actually can have some value, so we should process this edge case in the form logic
*/
const checkAutofilled = () => {
const autofilled = !!document.getElementById('field')?.matches('*:-webkit-autofill')
setWasInitiallyAutofilled(autofilled)
}
// The time when it's ready is not very stable, so check few times
setTimeout(checkAutofilled, 500)
setTimeout(checkAutofilled, 1000)
setTimeout(checkAutofilled, 2000)
}, [])
componentDidMount中设置email状态会更好。this.setState({ email: document.getElementById('email').value })
componentDidMount()，Chrome会填充电子邮件并更新state，然后呈现提交按钮并使其启用。useEffect 中设置调试器后，电子邮件输入框的 .value 为空，并且在 Chrome 填充输入框后，useEffect 不会第二次触发（省略了数组参数）。只有当我与页面交互（导致重新渲染）时，useEffect 才会第二次触发，并且可以检测到由 Chrome 放置在电子邮件字段中的值。 - bsmidtson一种稍微更好（依我个人意见）的解决方案，不需要使用 setTimeout()。
为了规避这个问题，您可以为每个 input 的 onAnimationStart 事件添加一个处理程序，检查 animationName 是否为 "mui-auto-fill"，然后检查 input 是否具有 -webkit-autofill 伪类, 以查看浏览器是否自动填充了字段。您还需要处理场景中的 "mui-auto-fill-cancel" 情况，即表单被自动填充并且用户清除了值（以重置 shrink）。
例如：
const [passwordHasValue, setPasswordHasValue] = React.useState(false);
// For re-usability, I made this a function that accepts a useState set function
// and returns a handler for each input to use, since you have at least two
// TextFields to deal with.
const makeAnimationStartHandler = (stateSetter) => (e) => {
const autofilled = !!e.target?.matches("*:-webkit-autofill");
if (e.animationName === "mui-auto-fill") {
stateSetter(autofilled);
}
if (e.animationName === "mui-auto-fill-cancel") {
stateSetter(autofilled);
}
};
...
<TextField
type="password"
id="password"
inputProps={{
onAnimationStart: makeAnimationStartHandler(setPasswordHasValue)
}}
InputLabelProps={{
shrink: passwordHasValue
}}
label="Password"
value={password}
onChange={(e) => {
setPassword(e.target.value);
...
}}
/>
更新取消--允许用户在加载自动填充后清除表单字段，并重置标签：
makeAnimationStartHandler函数设置为接受一个React.useState()的setter作为参数，并返回一个实际执行工作的处理程序，因为你的示例有两个字段，我想要1）减少代码量和2）允许你仍然单独处理每个字段的手动输入用例，如果需要的话。有同样的问题。我的解决方案是：
function LoginForm(props: Props) {
const usernameElement = React.useRef<HTMLInputElement>(null);
const passwordElement = React.useRef<HTMLInputElement>(null);
const [username, setUsername] = React.useState<string>('');
const [password, setPassword] = React.useState<string>('');
React.useEffect(() => {
//handle autocomplite
setUsername(usernameElement?.current?.value ?? '');
setPassword(passwordElement?.current?.value ?? '');
}, [usernameElement, passwordElement])
return (
<form className='loginform'>
<input ref={usernameElement} defaultValue={username} type='text' onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
setUsername(event.target.value);
}} />
<input ref={passwordElement} defaultValue={password} type='password' onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
setPassword(event.target.value);
}} />
<button type='button' onClick={() => {
console.log(username, password);
}}>Login</button>
</form>
)
}
useEffect(() => {
onChange(value);
},
[value, onChange]);
那对我有用。
我在这里创建了一个示例应用程序https://codesandbox.io/s/ynkvmv16v
这解决了你的问题吗？
e.target.value 总是为空。这就是问题所在。 - naezith