import React, { useState } from 'react';
function NumberInputForm() {
console.log('MyComponent rendering...');
const [number, setNumber] = useState('');
const handleInputChange = (event) => {
const value = event.target.value;
setNumber(value);
};
const handleSubmit = (event) => {
event.preventDefault();
// Validate the input as a positive number
const parsedNumber = parseFloat(number);
if (parsedNumber > 0) {
// Handle the positive number (e.g., send it to the server, perform calculations, etc.)
console.log('Positive number:', parsedNumber);
} else {
// Handle invalid input (e.g., show an error message)
console.log('Invalid input:', number);
}
};
return (
<form onSubmit={handleSubmit}>
<label>
Enter a positive number:
<input
type="number"
value={number}
onChange={handleInputChange}
min="0" // Set the minimum value as 0 to enforce positive numbers
step="any" // Allow any decimal input
required // Make the input field required
/>
</label>
<button type="submit">Submit</button>
</form>
);
}
export default NumberInputForm;
<!DOCTYPE html>
<html>
<head>
<style>
.centered-text {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
color: rgb(0, 128, 255);
}
</style>
<style>
.multiline-text {
white-space: pre-line;
}
</style>
<title>Data Collection</title>
</head>
<body>
<div id="root"></div>
<!-- Include React library -->
<script src="../node_modules/react/umd/react.development.js"></script>
<!-- Include React DOM library -->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../src/components/component1.js"></script>
<div class="centered-text">
<div class="multiline-text">
<h2>What is the name of the stock</h2>
<input type="text" id="stockname" name="stockname" placeholder="Enter text here">
<h2>1. How much is it undervalued?</h2>
</div>
</div>
</body>
</html>
1条答案
按热度按时间7z5jn7bk1#
看起来你不捆绑你的组件...
在将JSX导入浏览器之前，您需要先转换它。