ReactJS:在提交和更改时访问一个非常简单的表单输入值

Question

我很欣赏这可能是基本的，因为我是新手，但我试图在更改或提交输入时非常简单地记录输入的值。

这是代码：

import React from "react";
const App = () => {
const onNameChange = (nameInput) => {
console.log("name change Fn", nameInput);
};
return (
<>
<form onSubmit={onNameChange(this.value)}>
<input value='the value' type="text" onChange={console.log(this.value)}></input>
</form>
</>
);
}
export default App

1. 为什么我不能在表单内单击并更改值？
2. 如何在单击内部并更改输入时记录输入的值？
3. 如何在提交时记录输出的值？

谢谢。。。这是一个堆栈闪电战演示： https://stackblitz.com/edit/react-tvk69a

Answer 1

编辑：为什么我不能在表单内单击并更改值？

您在表单 Input 中传递硬编码值，您需要将其替换为可以在组件中控制的值。因此，您可以向状态添加一些内容以对其进行跟踪，例如：

const [value, setValue] = React.useState('')

并将其插入输入元素中：

<input value={value}...

最后，您需要处理更改，以便更新状态：

<input value={value} onChange={e => setValue(e.target.value)}

如何在单击内部并更改输入时记录输入的值？

您可以使用 onClick 和 onChange 道具并将您的处理程序传递给那里：

<button onClick={activateLasers}> Activate Lasers </button>.
<input value={value} onChange={e => setValue(e.target.value)} />

如何在提交时记录输出的值？

在标签上，您可以使用处理程序传递 onSubmit 属性，该属性将从其内部类型='submit' 触发

<form onSubmit={handleSubmit}>

Answer 2

在这里你可以看到一个完整的例子：

import React, { useState, useEffect } from "react";
const App = () => {
const [textV, setTextV] = useState("the value");
const onNameChange = () => {
event.preventDefault();
console.log("name change Fn", textV);
};
useEffect(() => {
console.log("Text has changed: ", textV);
}, [textV]);
return (
<form onSubmit={onNameChange}>
<input
value={textV}
type="text"
onChange={e => setTextV(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
};
export default App;

你可以在这里玩它： https://stackblitz.com/edit/react-ky2cks?file=src/App.js

解释： 要控制文本区域值的变化，您应该使用反应状态

import React, { useState, useEffect } from "react";

const App = () => {
const [textV, setTextV] = useState("the value");

然后，您需要有一个提交按钮来调用表单上的onSubmit事件

<form onSubmit={onNameChange}>
<input
value={textV}
type="text"
onChange={e => setTextV(e.target.value)}
/>
<button type="submit">Submit</button>
</form>

在形式中，您可以看到我将输入值从"值"更改为{textV}textV因为这是我之前声明的状态，在 onChange 函数中，我调用状态处理程序函数来更改状态textV的值，此函数允许我在每次输入值更改时更新状态。

要记录每次输入值更改时的状态值，可以使用 useEffect 挂钩：

useEffect(() => {
console.log("Text has changed: ", textV);
}, [textV]);