При вводе чего-либо в одном инпуте, состояние меняется во всех инпутах. То есть начинаю что-то набирать, и знаки появляются и в других полях. Безусловно, где-то есть глупая ошибка. Помогите, пожалуйста, начинающему.
RegistrationForm.jsx
import React, {Component} from 'react';
import Input from './Input';
import SubmitButton from './Button.jsx';
import SocialButtons from './SocialButtons'
import CheckboxLabel from './Checkbox'
const style = {
inputStyle: {
margin: 12,
},
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import TextField from 'material-ui/TextField';
const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
alignContent: 'center',
justifyContent: 'center',
},
textField: {
margin: theme.spacing.unit,
width: 350,
},
});
class ComposedTextField extends React.Component {
render() {
const { classes } = this.props;
const { type } = this.props;
const { name } = this.props;
const { placeholder } = this.props;
const { value } = this.props;
const { onChange } = this.props;
return (
<div className={classes.container}>
<TextField
required
id="required"
label={placeholder}
className={classes.textField}
margin="normal"
type={type}
name={name}
value={value}
onChange={onChange}
/>
</div>
);
}
}
ComposedTextField.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ComposedTextField);
Input.jsx
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import TextField from 'material-ui/TextField';
const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
alignContent: 'center',
justifyContent: 'center',
},
textField: {
margin: theme.spacing.unit,
width: 350,
},
});
class ComposedTextField extends React.Component {
render() {
const { classes } = this.props;
const { type } = this.props;
const { name } = this.props;
const { placeholder } = this.props;
const { value } = this.props;
const { onChange } = this.props;
return (
<div className={classes.container}>
<TextField
required
id="required"
label={placeholder}
className={classes.textField}
margin="normal"
type={type}
name={name}
value={value}
onChange={onChange}
/>
</div>
);
}
}
ComposedTextField.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ComposedTextField);