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 "";
}
}
Related
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.
// I use autocomplete when i search key words and i want to render menu data.
<AutoComplete
placeholder="Search movies" //This is props placeholder
data={search} //where i received data
onChange={(e)=> handleSearch(e)} //where i handle input
renderMenuItem={(item) => {
return (
<div>
<img src={urlConfig.url_img + item.poster_path} />
<p>{console.log(item.original_title)}</p>
</div>
);
}}
/>
//Who can help me please? Above this i my code to handle
I have two forms: edit and new. They have different headers and a different set of buttons.
I always get bogged down in style. Which is preferred and why? Examples are showing edit form.
// inside FormImpl we look at mode to display a different header.
// inside FromImpl we look for the presence of onCancelEdit to show the cancel button.
<Form
render={form => (
<FormImpl form={form} mode="edit" onCancelEdit={handleCancelEdit} />
)}
/>
// header is controlled outside the form
// buttons and header live outside FormImpl
// formId is passed to the <form /> inside FormImpl
<Form
render={form => (<>
<h2>Edit</h2>
<FormImpl form={form} formId="main" />
<div>
<button for="main" type="submit">Submit</button>
<button onClick={handleCancelEdit}>Cancel</button>
</div>
</>)}
/>
// header is controlled outside the form
// slot the buttons, giving FormImpl the responsibility of placing them where needed.
<Form
render={form => (<>
<h2>Edit</h2>
<FormImpl
form={form}
buttons={
<div>
<button type="submit">Submit</button>
<button onClick={handleCancelEdit}>Cancel</button>
</div>
}
</>)}
/>
I've tried all three. This pattern comes up a lot and it's not always clear what to use. I'm using this as a learning exercise.
I am trying to create a form with redux-form however I've run into a problem where when I check 1 of my checkboxes they all get checked.
I've created my checkboxes in a form element which gets returned like this:
<div>
<label>Content Type</label>
{contentTypes.map(type=> {
return(
<Field
label={type.name}
name='content-type'
component={this.renderField}
content_type={type.type}
type='checkbox'
value='text'
/>
)
})}
</div>
the renderField function looks like this:
renderField({label, type, value, input, content_type}) {
return(
<div className='form-group'>
<label>{label}</label>
<input
{...input}
className='form-control'
type={type}
value={content_type}
name={input.name}
/>
</div>
)
}
I swapped out value for content_type because everytime this runs value is undefined. I'm incredibly new to redux form so if I'm doing something beyond wrong please tell me.
name='content-type'
you need to give them unique names
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!