Creo que su problema es que tiene que administrar mucho con estado/tienda. En React, la validación es compleja debido al enlace unidireccional.

Esta biblioteca https://github.com/vishalvisd/react-validator es una que encontré que admite la validación del componente material-ui. Aunque en general puede usar esto para validar cualquier componente.

Sugeriría usar algún enfoque de HoC (Componente de orden superior). Probé muchas soluciones para la validación de formularios en React JS, la que siempre elijo es: react-validation-mixin . Echa un vistazo a este ejemplo .

Ejemplo de la entrada estándar:

 <input type='text' placeholder='Username' value={this.props.username} onChange={this.onChange('username')} onBlur={this.props.handleValidation('username')} />

En este ejemplo, el value de esa entrada proviene de props (ejemplo con la implementación de Flux) y eso es probablemente lo que busca también (muchas entradas). onChange deberá manejar el cambio de valor para que this.props.username también se actualice y onBlur activará la verificación de validación (para que el error aparezca una vez que el usuario abandone la entrada).

Para obtener el mensaje de error, use: this.props.getValidationMessages('username')

Es una solución universal y puede usarla en diferentes bibliotecas. Pero tomando TextField de material-ui , como preguntaste:

 <TextField floatingLabelText="Username" value={this.props.username} errorText={this.props.getValidationMessages('username')} onChange={this.onChange('username')} onBlur={this.props.handleValidation('username')} ... />

Recuerde usar HoC con su componente: export default validation(strategy)(UserLogin) De esa manera, obtendrá todos los métodos auxiliares necesarios en props .

Si está utilizando Redux en el proyecto React, redux-form le brinda una forma simple de implementar la validación de formularios.

Mira esto: http://redux-form.com/6.4.3/examples/syncValidation/