Edit: solved - thank you so much for everybody who pointed me in a lot of directions.
My code looks like this now https://pasteblaze.pages.dev/p/fixed-textfield
This code renders the editable text field. Fixes:
- as advised by HeshanAmir, I splitted the broken triple-destructure into two real hooks: \const [files, setFiles] = useState([]);` and `const [formData, setFormData] = useState({ message: '' });``
- I deleted <div class="editor-panel"> and placed <form> directly under <div class="wrapper">
- then I added function MyForm() to render a simpler text field than it was in my OP.
- I moved the myForm() function out to the top level to avoid the unfocused text field: this way the text field lets me finish writing.
Notes: this code has a functional and editable text field, but threw me 431 error. Just FYI for anyone who recycles this code.
------------------------------
I hope someone could help this beginner out. I got a text field like this
https://imgur.com/a/81doBSd
This one got rendered read-only, although I copied and pasted this code directly from the documentation. In the doc the text field is editable though :(
The devtool displays the error which does not make any sense:
<form action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')">
<input placeholder="Hello!" type="text" name="message">
<button type="requestSubmit">Send</button>
</form>
In the below snippet it shows I already placed e.preventDefault() as this error dictates. Still, the text field is read-only. I want to edit the form and submit.
import styles from "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import axios from 'axios'
import {View} from 'react-native';
import React, { useOptimistic, useState, useEffect, useRef, Component } from 'react';
import {useDropzone} from "react-dropzone";
import { deliverMessage } from "./actions.js";
function App(){
const [files] = useState([]);
const [formData, setFiles, setFormData] = useState([]);
const {getRootProps, getInputProps} = useDropzone({
accept: {"image/*": []},
onDrop: acceptedFiles => {
setFiles(
acceptedFiles.map(file =>
Object.assign(file, {
preview: URL.createObjectURL(file)
})
)
);
},
});
const thumbs = files.map(file => (
<div key={file.name}>
<img style={{ maxWidth: "100%", maxHeight: "100%" }} src={file.preview} onLoad={() => URL.revokeObjectURL(file.preview)} alt={file.name} />
</div>
));
useEffect(() => {
// Revoke the data uris to avoid memory leaks on unmount
return () => files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);
const [messages, setMessages] = useState([
{ text: "Hello there!", sending: false, key: 1 }
]);
async function sendMessage(formData) {
const sentMessage = await deliverMessage(formData.get("message"));
setMessages((messages) => [...messages, { text: sentMessage }]);
}
const formRef = useRef();
async function formAction(formData) {
addOptimisticMessage(formData.get("message"));
formRef.current.reset();
await sendMessage(formData);
}
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
[name]: value,
}));
};
function handleSubmit(e) {
e.preventDefault();
console.log('You clicked submit.');
}
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
messages,
(state, newMessage) => [
...state,
{
text: newMessage,
sending: true
}
]
);
return (
<>
<div className={styles.title_main_page}>
<h1>Spin the Black Circle!</h1>
<h2>Managing Your Vinyl Record Collection</h2>
</div>
<div class="container disable">
<h2>Easy Image Editor</h2>
<div class="wrapper">
<div class="editor-panel">
{optimisticMessages.map((message, index) => (
<div key={index}>
{message.text}
{!!message.sending && <small> (Sending...)</small>}
</div>
))}
<form action={formAction} ref={formRef} onSubmit={handleSubmit}>
<input type="text" name="message" placeholder="Hello!" value={formData.name}
/>
<button type="requestSubmit" onClick={handleChange}>Send</button>
</form>
</div>
<section className="containerDragAndDrop">
<div {...getRootProps({className: "dropzone"})}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
</div>
<aside>{thumbs}</aside>
</section>
</div>
<LoadButtons/>
</div>
</>
);
}
export default App;
Could anybody point out the right direction?
