How do I apply any type of CSS to redux-form Field components? className and class are silently ignored:
<div>
<label>Name</label>
<div>
<Field
className="form-input"
name="formContactName"
component="input"
type="text"
placeholder="Person to contact"
/>
</div>
</div>
I was able to the apply the styles by creating a custom component:
<div>
<label>Name</label>
<div>
<Field
name="formContactName"
component={ customInput }
/>
</div>
</div>
but that's a major PITA and also largely negates the gains of using redux-form in the first place. Am I missing something? Note I added the className assignments directly in the custom component - I realize I can send them through as props in Field.
I tried setting input styles globally but they were ignored as well. The redux-form website docs tell you everything you need to know to use the rig but make no mention of CSS that I can see...
Thanks,
JB
Edit: this is not a duplicate - the answer pointed to uses a custom input component. As stated above, I can get that to work, but then there's really no need for redux-form in the first place.
#Jay: I was able to get this to work with a custom component by grabbing the code from the online docs:
class MyCustomInput extends Component {
render() {
const { input: { value, onChange } } = this.props
return (
<div>
<label htmlFor="formContactName" className="col-sm-2 control-label">Name:</label>
<div className="col-sm-10">
<input
id="formContactName"
placeholder="Person to contact"
className="form-control"
type="text"
/>
</div>
</div>
)
}
}
and then, in the redux-form Form code:
<div>
<label>Name</label>
<div>
<Field
name="formContactName"
component={ MyCustomInput }
/>
</div>
</div>
The bootstrap settings via className worked fine using this method.
All your custom props would be passed to the input component, so you can do
const CustomTextField = props => {
const { input, label, type, meta: { touched, error }, ...other } = props
return (
<TextField
label={label}
type={type}
error={!!(touched && error)}
helperText={touched && error}
{ ...input }
{ ...other }
/>
)
}
And then you can pass any props, including className to the CustomTextField
<Field
name="some"
component={CustomTextField}
className="css-applied"
/>
Related
I tried to add a required element (when the box become red if not text is inside) on my form but without success, I installed react-strap, Bootstrap. when I apply many changed it didn't work for no reason
and it's just not moving if someone know why I would be happy.
render() {
return (
<div>
<form class="needs-validation" novalidate>
<InputGroup size="sm">
<InputGroupAddon addonType="append" className="m-2">
<Input
className="form-control"
placeholder="Add a new To-Do. "
onChange={(e) => this.updateInput(e.target.value)}
value={this.state.input}
onKeyPress={this.handleKeyPress}
required
/>
<Button
color="primary"
size="sm"
className="add-todo"
onClick={this.handleAddTodo}
>
Add
</Button>
</InputGroupAddon>
</InputGroup>
</form>
</div>
);
}
export default connect(null, { addTodo })(AddTodo);
// export default AddTodo;
What you are doing is passing required as a prop to your class Input. You need to add the html tag when the field renders, i.e. in Input.js:
return (
<input ... required={this.props.required}>
)
i think you should add the 'is-invalid' class to the input element if that field is empty.
https://getbootstrap.com/docs/4.0/components/forms/?#server-side
I need to apply some styling to the label of a Redux Form Field. The Redux Form API doesn't mention any way to style the label. The classes.formField class gets applied to the field itself but not the label.
This may also be a question about forcing inheritance because the label, in this case, is not inheriting the parent's styles.
import { Field } from 'redux-form'
import TextField from 'redux-form-material-ui/lib/TextField'
<Field
className={classes.formField}
component={TextField}
label={'style me!!'}
fullWidth
name="answer"
required
type="text"
validate={[required]}
/>
Add your own <CustomLabel /> component to the label prop.
<Field
className={classes.formField}
component={TextField}
label={<CustomLabel/>}
fullWidth
name="answer"
required
type="text"
validate={[required]}
/>
Make custom label component and pass it
const CustomLabel = () => {
var labelStyle = {
color: 'white',
};
return <label style={labelStyle}> Im the custom label with css </label>
}
In React, inline styles are not specified as a string. Instead they
are specified with an object whose key is the camelCased version of
the style name, and whose value is the style's value, usually a string.
You can pass props directly to TextField using the props prop:
<Field
component={TextField}
props={{ className: classes.formField }}
label={'style me!!'}
fullWidth
name="answer"
required
type="text"
validate={[required]}
/>
Sadly this is undocumented on Redux-Form: Field docs :/
I have a redux-form which is used for data entry from the user(in my case the redux-form is used for recording posts in a blog).So,if I want to edit the existing data,then I want that the user will be redirected to the redux-form but the values of that particular post which the user want to edit should be passed along and the input fields in the redux-form should be populated with the existing data of the the post.So,now I am not able to figure out how to pass the data of the post to the redux-form and populate the redux-form from the beginning.My redux-form now has a function which is used in a "Field" from redux-form.The function looks like:
renderField(field) {
return(
<div className="title-design">
<label className="label-design"> {field.label} </label>
<input
type="text"
className="title-input"
{...field.input}
/>
<div className="text-help has-danger">
{field.meta.touched ? field.meta.error : ''}
</div>
</div>
);
}
And in my render method:
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<Field
label="Title for Post"
name="title"
component={this.renderField}
/>
<Field
label="Post Content"
name="body"
component={this.renderField}
/>
<Field
label="Category"
name="category"
component={this.renderCategory}
/>
<button type="submit" className="btn btn-primary">Submit</button>
<Link to="/">
<button className="cancel-button">Cancel</button>
</Link>
</form>
);
}
}
Also, can I use the same reudx-form which is used to create a new post, or do I have to create a new component only for editing the already existing posts? Can someone please help me with this.
I'm trying to render a form with data stored in the database. If I remove the form and wrap the PositionSingle input fields in a div the data renders correctly however I'm unable to make any changes. When I wrap the inputs in a form the component doesn't render.
I'm new to react with meteor so any assitance is appreciated.
Path: PositionSingle.jsx
render() {
return (
<form className="new-position" onSubmit={this.addPosition.bind(this)}>
<input
type="text"
ref="title"
placeholder="Position title"
defaultValue={this.props.position.title} />
<input
type="text"
ref="company"
placeholder="Company"
defaultValue={this.props.position.company} />
<button type="submit">Submit</button>
</form>
)
}
Path: PositionWrapper.jsx
render() {
return (
<div>
{this.positions().map( (position)=>{
return <PositionSingle key={position._id} position={position} />
})}
</div>
)
}
This is a very old question, so I don't know if you still have the same project, even, but I like to make sure there are no loose ends if I can. That error looks like what #ThaiTran said, that you don't have addPosition defined in PositionSingle. After you add that, that error should go away. Did that work?
I have a react component in meteor with a webform in. The following code works fine and prints hello addtile in the console:
export default class NewTileForm extends Component {
addTile(event){
event.preventDefault();
console.log("hello addtile")
}
render(){
return(
<div>
<form className="tile-new" onSubmit={this.addTile.bind(this)}>
<input type="text"
ref="tile"
placeholder="Tile Title"/>
</form>
</div>
)
}
}
However, if I try to add a input to the webform I get no response from the console log:
export default class NewTileForm extends Component {
addTile(event){
event.preventDefault();
console.log("hello addtile")
}
render(){
return(
<div>
<form className="tile-new" onSubmit={this.addTile.bind(this)}>
<input type="text"
ref="tile"
placeholder="Tile Title"/>
<input type="text"
ref="company"
placeholder="Tile Company"/>
</form>
</div>
)
}
}
What am I missing?
This is "a browser thing" - you can't submit a form with the enter key and without a submit or button. No it's not react specific. To be honest, not sure why it worked with one - not sure the caveat there.
Anywho, Stackoverflow has lots of answers about tackling this issue (when you remove react as the problem):
Submitting a form by pressing enter without a submit button