,可以通过以下步骤实现:
import React, { useState } from 'react';
function MyComponent() {
const [value1, setValue1] = useState('');
const [value2, setValue2] = useState('');
const handleInputChange = (event) => {
const { name, value } = event.target;
if (name === 'value1') {
setValue1(value);
} else if (name === 'value2') {
setValue2(value);
}
};
const handleSubmit = (event) => {
event.preventDefault();
// 在这里将值发送到服务器
// 可以使用fetch或axios等库发送POST请求
// 例如:
fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ value1, value2 }),
})
.then((response) => response.json())
.then((data) => {
// 处理服务器返回的响应
})
.catch((error) => {
// 处理错误
});
};
return (
<form onSubmit={handleSubmit}>
<label>
Value 1:
<input
type="text"
name="value1"
value={value1}
onChange={handleInputChange}
/>
</label>
<br />
<label>
Value 2:
<input
type="text"
name="value2"
value={value2}
onChange={handleInputChange}
/>
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
export default MyComponent;
这样,当用户在输入框中输入值并点击提交按钮时,React组件会将这两个值发送到服务器的API端点。你可以根据具体的需求在服务器端进行相应的处理。
领取专属 10元无门槛券
手把手带您无忧上云