I am making a react web app in which I want some users to have the ability to post newsletters. I am using react quill as the text editor for this.
The issue I am experiencing is how to edit a saved draft or edit an already published newsletter. I want to pass the appropriate newsletter into the editor when i click on the 'edit-button'. But I could not figure out how on my own, neither could I find anything on the subject.
I am using sequelize for my backend and currently the editor is a popup.
<Popup
trigger={<button
class="btn">
Redigera
</button>}>
<React.StrictMode>
<Editor />
</React.StrictMode>
</Popup>
The editor looks like this. I have a text field where the user puts the title of the newsletter and a date picker if they'd like to set a specific date for when it is to be published.
return (
<div class="overlay">
<button id="closeButton">Stäng och spara</button>
<div className="text-editor">
<EditorToolbar />
<TextField
required
id="required"
fullWidth
label="Titel"
onChange={(e) => setTitle(e.target.value)}
/>
<ReactQuill
theme="snow"
value={content}
onChange={setContent}
placeholder={"Skriv ditt nyhetsbrev här..."}
modules={modules}
formats={formats}
/>
<TextField
id="date"
label="Välj dag för publicering"
type="date"
defaultValue={getCurrentDate()}
onChange={(e) => setPublishedAt(e.target.value)}
sx={{ width: 220 }}
InputLabelProps={{
shrink: true,
}}
/>
<button class="rte-button" onClick={publishNow}>Publicera</button>
<div class="buttons">
<button class="rte-button" onClick={onDelete}>Ta bort</button>
<button class="rte-button" onClick={saveNewsletterAsDraft}>Spara utkast</button>
</div>
</div>
</div>
);
};
export default Editor;
I am doing a findAll to retrieve all the existing newsletters from the backend so what I've been thinking of doing is to pass the content and title of the newsletter i want to edit into the editor as a prop. But I would rather not do that as I am not working with classes.
Related
I have a simple react component created using material UI
function TableField(id) {
return (
<div className='flex' id={id}>
<TextField class="mr-2" id='0' label="Field type" variant="outlined" value='2' />
<TextField class="mr-2" id='1' label="Field Name" variant="outlined" value='3' />
</div>
);
}
ISSUE:
In the website the fields label are overlapping each other.
What I have tried:
As mentioned in Another StackOverflow question I tried adding values to my text fields as well but it did not work out.
What am I doing wrong here?
(this seem to have been asked previously but I couldn't find any hint on if it was actually answered)
MUI has a good demo for creating upload buttons which boils down to:
<input accept="image/*" className={classes.input} id="icon-button-file" type="file" />
<label htmlFor="icon-button-file">
<IconButton color="primary" aria-label="upload picture" component="span">
<PhotoCamera />
</IconButton>
</label>
What I wonder is how to implement the same using the Speed Dial. Inherently the SpeedDialAction seems to materialize as a <button/>, but it's not possible to e.g. wrap the SpeedDialAction in a <label htmlFor /> as its parent will try to set some props on it and will fail.
So how do I initiate the file selection from within the Speed Dial or a FAB in general?
You can create a wrapper component that forwards props to SpeedDialAction.
function UploadSpeedDialAction(props) {
return (
<React.Fragment>
<input
accept="image/*"
style={{ display: "none" }}
id="icon-button-file"
type="file"
/>
<label htmlFor="icon-button-file">
<SpeedDialAction
icon={<CloudUploadIcon />}
tooltipTitle="upload"
component="span"
{...props}
></SpeedDialAction>
</label>
</React.Fragment>
);
}
https://codesandbox.io/s/material-demo-forked-h6s4l
(Note to future readers: For v5, time allowing, we hope to rationalise where props rather than context are used to control children, in order to solve exactly this kind of issue. So check whether this solution is still needed.)
It is - in my knowledge - not possible to add the htmlFor in any way. So what I would do is to add a hidden input type file and then add a ref to it. Then in the onclick of the SpeedDialAction button I would call a handler function that clicks on the input ref. Like this:
const inputRef = useRef();
const handleFileUploadClick = () => {
inputRef.current.click();
};
Then your SpeedDialAction:
<SpeedDialAction
onClick={handleFileUploadClick}
... the rest of your props
/>
And then finnaly your actual input:
<input
style={{ display: "none" }}
ref={inputRef}
accept="image/*"
id="contained-button-file"
multiple
type="file"
/>
Working demo: https://codesandbox.io/s/material-demo-forked-f9i6q?file=/demo.tsx:1691-1868
This is my code, I am unable when I try and Click on the text fields nothing happens.
class Contact extends React.Component {
render () {
return (
<Wrapper >
<MuiThemeProvider muiTheme={getMuiTheme()}>
<header>
<CommonBar />
</header>
<Banner>
<h1> Contact Us </h1>
</Banner>
<PleaseFill> Let's do business together! Send us a Message.
</PleaseFill>
<Fields>
<TextField
floatingLabelText="Please enter your full name"
hintText = "Full Name"
fullWidth={true}
type = "text"
/>
<br/>
<TextField
floatingLabelText="Please enter your contact number"
hintText = "Number"
fullWidth={true}
type = "number"
/>
<br/>
<TextField
floatingLabelText="Please enter your email id"
hintText = "Email Id"
fullWidth={true}
/>
<br/>
<TextField
floatingLabelText="Enter your message"
hintText = "Message Body"
multiLine={true}
rows ={5}
fullWidth={true}
/>
<br/>
<br/>
<br/>
<Button>
<RaisedButton label="Send" primary={true} style = {{ width: '16rem', height: '3.25rem'}} labelStyle = {labelStyle} />
</Button>
</ Fields>
</ MuiThemeProvider>
</ Wrapper>
);
}
}
export default Contact;
I am using styled-components to style.
If you check out Contact_us component you will see my code. On the link below you can check my code.
Material-ui works fine in Homepage.js component. Please check my full code here.
https://github.com/SamkitS/showell/blob/master/src/components/Contact_Us.js
As you can see I have imported MuiThemeProvider, Raised Button, TextField etc.
Terminal does not show any bugs.
I am using create react app.
I have checked all the solutions offered on StackOverflow but nothing works.
Please help.
Expected resulted should be the way it is shown in the docs. https://www.material-ui.com/#/components/text-field
I have a page with bunch of office fabric textField controls. They have their own onGetErrorMessage method to validate and show the error message. But I don't want to fire validation onBlur or onFocusIn. I want to validate all on some 'Save' button click. How can I access the controls and walk through those and fire validation on it at once? The controls are not in tag.
e.g.
<div>
<div>
<TextField label="First Name:" onGetErrorMessage={this._onError} />
</div>
<div>
<TextField label="Last Name:" onGetErrorMessage={this._onError} />
</div>
<div>
<TextField label="Email:" onGetErrorMessage={this._onError} />
</div>
<div>
<TextField label="Username:" onGetErrorMessage={this._onError} />
</div>
<div>
<input type="button" onClick={this.validate()} value="Save" />
</div>
</div>
I tried initializing TextField first and then using it in render() and accessing it in validate() but didn't work. Any ideas how this can be achieved?
Just came across this, but looks like no one answered.
Can be done via a simple event capturing:
validate = () =>{
this.go = true;
}
_onError = () => {
if (!this.go){
return "";
}
}
I have recently started exploring Material UI and I have run into this strange behavior of a hintText in a TextField Component(the one from Material UI)
This is my code:
/* in my component ... */
/* ... */
render() {
const actions = [
<FlatButton
key="1"
label="Cancel"
primary
onTouchTap={this.handleClose}
/>,
<FlatButton
key="2"
label="Submit"
primary
type="submit"
onTouchTap={this.handleSubmit}
/>
];
return (
<div>
<IconButton
tooltip="Add Asset"
onTouchTap={this.handleOpen}>
<Add color={"#000"} />
</IconButton>
<Dialog
title="Add"
actions={actions}
modal
open={this.state.open}>
<form>
<TextField hintText="Type"
value={this.state.name}
onChange={this.handleName}/>
</form>
</Dialog>
</div>
);
}
So when I start typing in the textfield, the hinttext remains, resulting in unreadable text due to letters over another letters.
I would really appreciate it if someone could help me. :)
image
Try using placholder="Type" rather than hintText="Type".
The solution for this is that you will have to update the variable name in the function handleName everytime the user updates the field. So the complete code is:
<TextField
hintText="Type"
value={this.state.name}
onChange={this.handleName}
/>
and the function handleName:
handleName=(event)=>{
this.setState({name:event.target.value});
}
It should work. If not, let me know in the comments below!