编写第一个React应用程序时遇到的问题 - 简单交互表单,可以采取以下解决方法:
npx create-react-app my-app
cd my-app
npm start
Form.js
,并编写以下代码:import React, { useState } from 'react';
const Form = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
console.log('Name:', name);
console.log('Email:', email);
};
return (
);
};
export default Form;
App.js
中引入Form组件,并渲染它:import React from 'react';
import Form from './Form';
const App = () => {
return (
My App
);
};
export default App;
index.js
中渲染App组件:import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
以上代码示例中,我们使用了React的Hooks来处理表单的交互。通过useState钩子,我们可以跟踪表单中的name和email字段的值,并通过onChange事件处理程序更新它们。在表单提交时,我们使用handleSubmit函数来处理表单的提交操作,这里只是简单地将表单的值打印到控制台上。
希望这个示例能帮助你解决编写第一个React应用程序时遇到的问题。