我是 React 和 JavaScript 的新手;目前正在看钩子(Hook)。我在使用 Create React App 生成的应用程序中有这两个 React 功能组件:App.js
import React, { useState} from 'react';
import NameTaker from './components/NameTaker'
export default function App() {
const [name, setName] = useState(null);
if (name == null) {
return <NameTaker onSubmit={submitHandler} />
}
return <p>Your name is: {name}</p>
function submitHandler(e) {
setName(e.value)
}
}
和
NameTaker.js
import React from 'react';
export default function NameTaker(props) {
return(
<div>
<p>Please enter your name.</p>
<form onSubmit={props.onSubmit}>
<label>
Name:
<input type='text' name='name' />
</label>
<button type='submit'>Submit</button>
</form>
</div>
)
}
这是
index.js
中的渲染语句:ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
应用程序在本地运行正常,
NameTaker.js
中的所有元素在网页上正确显示。当我填写名称并单击按钮时,我希望它执行回调函数,将名称字符串存储在
name
中变量,那么当 App
函数组件重新渲染,新名称应该被存储和<p>Your name is: {name}</p>
当条件语句被命中时,应该返回而不是表单。但是,当我单击按钮时,URL 只是更改为添加 /?name=whatever
最后,表格保留在页面上。我尝试修改程序,以便它为按钮提供回调,而不是像这样的形式:
<button onClick={props.onSubmit}>Submit</button>
但行为没有变化。我尝试添加
e.preventDefault();
setName
之前和之后调用我的回调函数,但这也不起作用。我正在寻找的确切行为是:当名称为
null
时,返回显示表单/输入框的组件,使用回调将提交的名称保存在父组件的状态中,重新渲染父组件,但是因为状态不再是null
返回显示名称的段落而不是表单组件。谁能告诉我该怎么做?
最佳答案
你只需要修改你的submitHandler
功能如下:
function submitHandler(e) {
e.preventDefault();
setName(e.currentTarget.name.value)
}
您需要
e.preventDefault()
阻止页面重新渲染,虽然它通常不像以前那样需要,但我不完全确定为什么。为了从表单中获取值,您必须指定您想要的值。
e.currentTarget.name.value
给你当前的目标(即表格),然后是 .name
部分为您提供名称或 ID 为 name
的表单输入,然后您可以获得该输入的值。const {useState} = React;
function NameTaker(props) {
return(
<div>
<p>Please enter your name.</p>
<form onSubmit={props.onSubmit}>
<label>
Name:
<input type='text' name='name' />
</label>
<button type='submit'>Submit</button>
</form>
</div>
)
}
function App() {
const [name, setName] = useState(null);
function submitHandler(e) {
e.preventDefault();
setName(e.currentTarget.name.value)
}
if (name == null) {
return <NameTaker onSubmit={submitHandler} />
}
return <p>Your name is: {name}</p>
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"/>
关于reactjs - 如何使表单提交将数据保存在 useState Hook 变量中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62003832/