I have a simple component for rendering an input
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class TextInput extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
const { placeholder } = this.props;
return (
<div>
<input
type="input"
placeholder={placeholder}
/>
</div>
);
}
}
TextInput.propTypes = {
meta: PropTypes.shape({}),
placeholder: PropTypes.string
};
export default TextInput;
And I have a form who render my input with Field
component from redux-form
Like that :
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
Field,
reduxForm
} from 'redux-form';
import TextInput from '../../Fields/TextInput/index';
import {
USERNAME_NAME_FIELD,
PASSWORD_NAME_FIELD
} from '../../../constants/strings';
class LoginPage extends Component {
constructor(props) {
super(props);
this.state = {};
this.showResults = this.showResults.bind(this);
}
showResults(values) {
console.log(this);
console.log(values);
}
render() {
const { handleSubmit } = this.props;
return (
<div className="loginPage">
<form onSubmit={handleSubmit(this.showResults)} className="loginPage__form">
<div className="loginPage__form__fields">
<Field
name={USERNAME_NAME_FIELD}
type="text"
component={TextInput}
label={USERNAME_NAME_FIELD}
/>
</div>
<div className="loginPage__form__fields">
<Field
name={PASSWORD_NAME_FIELD}
type="text"
component={TextInput}
label={USERNAME_NAME_FIELD}
/>
</div>
<div className="loginPage__form__fields">
<button type="submit">Submit</button>
</div>
</form>
</div>
);
}
}
LoginPage.propTypes = {
values: PropTypes.shape({}),
handleSubmit: PropTypes.func
};
export default reduxForm({
form: 'loginPage' // a unique identifier for this form
})(LoginPage);
And I can't get the values when I passed my own component, but if I remove my own component and I replace it with a input
string, he works and I can get my values.
In your sample code, you're not passing placeholder
prop. But then, you're asking about value
. Assuming you're asking about how to pass value
and other HTML attributes such as placeholder
, the answer can be found in their docs .
Any custom props passed to Field will be merged into the props object on the same level as the input and meta objects.
value
is part of input
object, and other HTML attributes such as placeholder
are at same level as input
. I know it's confusing as hell and it took me a long while to wrap my head around it.
So to get the value, you would use:
const { placeholder, input: { value } } = this.props;
And to pass placeholder
:
<Field
name={USERNAME_NAME_FIELD}
type="text"
component={TextInput}
label={USERNAME_NAME_FIELD}
placeholder="some placeholder text"
/>
Also, your input type
is not a valid type. It should be type="text"
(judging from your code). You can see a list of valid input types here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.