Лично я считаю, что вы должны контролировать это с помощью реквизита, поскольку значение будет иметь значение только для родительского элемента Input.
Я использовал это
const InputField = ({
name,
placeholder,
value,
type,
onChange,
error,
missField
}) => (
<div>
<label className="f-size">{name}</label>
<input
className="input"
name={name}
placeholder={placeholder}
value={value}
type={type}
onChange={onChange}
/>
<span className="errorMessage">{error}</span>
<span className="errorMessage">{missField}</span>
</div>
);
Родительский компонент:
class App extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
state = {
value: '',
password: '',
};
handleChange(event) {
this.setState({ [event.target.name]: event.target.value });
}
render() {
return (
<div className="App">
<InputField
value={this.state.value}
type="number"
name="value"
onChange={this.handleChange}
/>
<InputField
value={this.state.password}
type="password"
name="password"
onChange={this.handleChange}
/>
</div>
);
}
}
Код Песочница: https://codesandbox.io/s/y4ljv75k9
Отредактировано для использования компонента без состояния.Не уверен, что вы хотите, чтобы state обрабатывал сообщения об ошибках, но из вашего примера это верное решение.